Addons by Reinos

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>