Site icon Jaime

Open source map development

Jaime Calvo

When creating a web or app map is becoming more popular to use open source maps and own map layers.  Here are some things to get you started.

So in open  I would say there are two big players, Leaflet and OpenLayers.
Google maps is also an alternative but cost money depending on how much you use them, you can calculate cost here.
If you need something simpler I would go with Leaflet or if you need something more advanced I would go with .

Gecoding

Geocoding is when you translate coordinates to address or address to coordinates. 

Geoserver

One of the benefits of using a Geoserver is that they are really fast on rendering a lot of points on maps. say you have 10 000 points you want to show, it would be really slow on a javascript based map to render all 10 00 points, even worse if you want custom markers.

Query a Geoserver layer

Geoservers even supports CQL (Common Query Language).
It is a human-readable query language, and its syntax is very similar to SQL syntax, but simpler.

CQL supports following operators:

GeoServer User Manual has some CQL filter examples, like:

There might be some difficuties when quering dates depending on formats:

DATE_COL AFTER 2016-01-01T00:00:00Z AND DATE_COL BEFORE 2016-12-31T23:59:59Z
DATE_COL > ‘01.01.2016’ AND DATE_COL < ‘31.12.2016’

And I haven’t found any support for case insensitve search. 

Markers

Geoservers also have a good support for custom markers. 
You can use styles like circle, square, lines etc. 
And you can upload or create your SLD file which is a standard styling  file which can look something like this: 

<?xml version="1.0" encoding="UTF-8"?>
<StyledLayerDescriptor version="1.0.0" xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc"
  xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.0.0/StyledLayerDescriptor.xsd">
  <NamedLayer>
    <Name>redflag</Name>
    <UserStyle>
      <Name>burg</Name>
      <Title>A small red flag</Title>
      <Abstract>A sample of how to use an SVG based symbolizer</Abstract>

<FeatureTypeStyle>
   <Rule>
     <Name>Large</Name>
     <MaxScaleDenominator>160000</MaxScaleDenominator>
       <PointSymbolizer>
         <Graphic>
           <ExternalGraphic>
             <OnlineResource
               xlink:type="simple"
               xlink:href="map_icon.png" />
             <Format>image/png</Format>
           </ExternalGraphic>
              <Size>
                32
              </Size>
         </Graphic>
       </PointSymbolizer>
            <TextSymbolizer>
         <Label>
           <ogc:PropertyName>name</ogc:PropertyName>
         </Label>
         <Font>
           <CssParameter name="font-family">Verdana</CssParameter>
           <CssParameter name="font-size">12</CssParameter>
           <CssParameter name="font-style">normal</CssParameter>
           <CssParameter name="font-weight">normal</CssParameter>
         </Font>
         <LabelPlacement>
           <PointPlacement>
             <AnchorPoint>
               <AnchorPointX>0.5</AnchorPointX>
               <AnchorPointY>0.0</AnchorPointY>
             </AnchorPoint>
             <Displacement>
               <DisplacementX>0</DisplacementX>
               <DisplacementY>-28</DisplacementY>
             </Displacement>
           </PointPlacement>
         </LabelPlacement>
         <Fill>
           <CssParameter name="fill">#000000</CssParameter>
         </Fill>
       </TextSymbolizer>
   </Rule>
   <Rule>
     <Name>Medium</Name>
     <MinScaleDenominator>160000</MinScaleDenominator>
     <MaxScaleDenominator>3200000</MaxScaleDenominator>
     <PointSymbolizer>
       <Graphic>
         <Mark>
           <WellKnownName>circle</WellKnownName>
           <Fill>
             <CssParameter name="fill">#CC3300</CssParameter>
           </Fill>
         </Mark>
         <Size>8</Size>
       </Graphic>
     </PointSymbolizer>
   </Rule>
   <Rule>
     <Name>Small</Name>
     <MinScaleDenominator>3200000</MinScaleDenominator>
     <PointSymbolizer>
       <Graphic>
         <Mark>
           <WellKnownName>circle</WellKnownName>
           <Fill>
             <CssParameter name="fill">#CC3300</CssParameter>
           </Fill>
         </Mark>
         <Size>4</Size>
       </Graphic>
     </PointSymbolizer>
   </Rule>
 </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

That style will create a red dot when zoomed out, when zooming in a bit the dot will change size, and even it will change to and also display a queried label from that position, if you have that data saved on the  of course. 

Exit mobile version