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="1" [OPTIONAL]

fill:opacity

set the fill opacity.

fill:opacity="0.4" [OPTIONAL]

fill:color

set the fill color

fill:color="#000000" [OPTIONAL]

Tagdata

Inside the tagdata your are placing your GeoJSON data.

When a feature has a popupContent property, it is used as the content of the popup. A name property is used as the tooltip.

{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>