Skip to content

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>