Appearance
Map GeoJSON
The add GeoJSON tag for use inside the {exp:reinos_maps:map}
tag
The tag
{exp:reinos_maps:map}
{maps:add_geojson}
{
"type": "Feature",
"properties": {
"name": "Coors Field",
"amenity": "Baseball Stadium",
"popupContent": "This is where the Rockies play!"
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
}
{/maps:add_geojson}
{/exp:reinos_maps:map}
Tag parameters
Below are the Tag Parameters. Those parameters can be used in the tag described above.
stroke:color
set the stroke color.
stroke:color="#000000" [OPTIONAL]
stroke:opacity
set the stroke opacity..
stroke:opacity="1" [OPTIONAL]
stroke:weight
Set the stroke weight
stroke:weight="6" [OPTIONAL]
fill:opacity
set the fill opacity.
fill:opacity="1" [OPTIONAL]
fill:color
set the fill color
fill:color="#000000" [OPTIONAL]
keys
To get the marker via the api, you have to enter the key for you marker. By default the keys are generated for you based on the address, number and latlng. To extend this with your own keys, you can use this param.
Use a colon :
to give it multiple keys
keys="key1_for_the_first_marker:key2_for_the_first_marker"
Tagdata
Inside the tagdata your are placing your GeoJSON data.
{exp:reinos_maps:html_header}
{exp:reinos_maps:map fit_map:geojson="yes"}
{maps:add_geojson}
[{
"type": "Feature",
"properties": {"party": "Republican"},
"geometry": {
"type": "Polygon",
"coordinates": [[
[-104.05, 48.99],
[-97.22, 48.98],
[-96.58, 45.94],
[-104.03, 45.94],
[-104.05, 48.99]
]]
}
}, {
"type": "Feature",
"properties": {"party": "Democrat"},
"geometry": {
"type": "Polygon",
"coordinates": [[
[-109.05, 41.00],
[-102.06, 40.99],
[-102.03, 36.99],
[-109.04, 36.99],
[-109.05, 41.00]
]]
}
}]
{/maps:add_geojson}
{/exp:reinos_maps:map}
Style
You can set the global style via the parameters. But to use a more dynamically approach you can also use a special Javascript function
The example below react before the geoJson is pared with the geojson.beforeReady
event. The you can use REINOS_MAPS.setGeoJsonStyle
that accept a function with a parameter for the current reading feature.
<script>
REINOS_MAPS.on('geojson.beforeReady', function(){
REINOS_MAPS.setGeoJsonStyle(function(feature) {
//your logic
return {color: #fff};
});
});
</script>
A full working example would be where we highlight the Republican state and the Democrat state
{exp:reinos_maps:html_header}
{exp:reinos_maps:map fit_map:geojson="yes"}
{maps:add_geojson}
[{
"type": "Feature",
"properties": {"party": "Republican"},
"geometry": {
"type": "Polygon",
"coordinates": [[
[-104.05, 48.99],
[-97.22, 48.98],
[-96.58, 45.94],
[-104.03, 45.94],
[-104.05, 48.99]
]]
}
}, {
"type": "Feature",
"properties": {"party": "Democrat"},
"geometry": {
"type": "Polygon",
"coordinates": [[
[-109.05, 41.00],
[-102.06, 40.99],
[-102.03, 36.99],
[-109.04, 36.99],
[-109.05, 41.00]
]]
}
}]
{/maps:add_geojson}
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}
<script>
REINOS_MAPS.on('geojson.beforeReady', function(){
REINOS_MAPS.setGeoJsonStyle(function(feature) {
switch (feature.properties.party) {
case 'Republican': return {color: "#ff0000"};
case 'Democrat': return {color: "#0000ff"};
}
});
});
</script>