Skip to content

Map

This is the main tag for all your mapping stuff, it render the actual map.

The tag

{exp:reinos_maps:map}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

tiles

use a tile that is enabled in the CP. Use more then one to enable the tile selector as seen below in the screenshots

Tile selector closed

Tile selector open

Default is openstreetmap

tiles="openstreetmap"

tile_control_position

The position of the control (one of the map corners). Possible values are topleft, topright, bottomleft or bottomright

tile_control_position="topright"

fullscreen_control

Enable the fullscreen control. This adds a button to map that will set the map to fullscreen upon click. Possible values are yes or no

fullscreen_control="no"

google_maps:style

if you enable the Google Tile, you also have the possibility to style the map. See https://developers.google.com/maps/documentation/javascript/styling

Because this is just Json, you can also use Snazzy for this https://snazzymaps.com/

As you enter json in the parameter, its better to use the alternative parameter.

{google_maps:style}
    [
        {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
        {
          featureType: 'administrative.locality',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'geometry',
          stylers: [{color: '#263c3f'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'labels.text.fill',
          stylers: [{color: '#6b9a76'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry',
          stylers: [{color: '#38414e'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry.stroke',
          stylers: [{color: '#212a37'}]
        },
        {
          featureType: 'road',
          elementType: 'labels.text.fill',
          stylers: [{color: '#9ca5b3'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry',
          stylers: [{color: '#746855'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry.stroke',
          stylers: [{color: '#1f2835'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'labels.text.fill',
          stylers: [{color: '#f3d19c'}]
        },
        {
          featureType: 'transit',
          elementType: 'geometry',
          stylers: [{color: '#2f3948'}]
        },
        {
          featureType: 'transit.station',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'water',
          elementType: 'geometry',
          stylers: [{color: '#17263c'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.fill',
          stylers: [{color: '#515c6d'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.stroke',
          stylers: [{color: '#17263c'}]
        }
      ]
{/google_maps:style} [OPTIONAL]

google_maps:streetview

Add Google Steetview to your map

Note: that you need to have Google Maps Tile enabled to get this fully working

google_maps:streetview="yes" [OPTIONAL]

center:address

Center the map based on an address

center:address=""

center:latlng

Center the map based on an latlng

center:address=""

zoom

the zoom level.

zoom="15" [OPTIONAL]

zoom:max

the max zoom level.

zoom:max="19" [OPTIONAL]

zoom:min

the min zoom level.

zoom:min="19" [OPTIONAL]

fit_map:markers

Fit the map based on the markers

fit_map:markers="yes" [OPTIONAL]

fit_map:circles

Fit the map based on the circles

fit_map:circles="no" [OPTIONAL]

fit_map:rectangles

Fit the map based on the rectangles

fit_map:rectangles="no" [OPTIONAL]

fit_map:polylines

Fit the map based on the polylines

fit_map:polylines="no" [OPTIONAL]

fit_map:polygons

Fit the map based on the polygons

fit_map:polygons="no" [OPTIONAL]

fit_map:geojson

Fit the map based on the geojson data

fit_map:geojson="no" [OPTIONAL]

fit_map:routes

Fit the map based on the routes
Only works when the Maps Route module is installed

fit_map:routes="no" [OPTIONAL]

fit_map:force_zoom_out

Zoom out on the bound level that has been set.

For example, your auto zoom is 10 and you are using fit_map:force_zoom_out="3". Your new zoom level become 7.

fit_map:force_zoom_out="1" [OPTIONAL]

fit_map:force_zoom

Force zoom. This will override the auto zoom level.

fit_map:force_zoom="10" [OPTIONAL]

You can combine multiple fit_map calls e.g. fit_map:circles="yes" fit_map:polygons="yes"

marker_cluster:enabled

enable clustering for the makers

marker_cluster:enabled="no" [OPTIONAL]

marker_cluster:show_coverage_on_hover

When you mouse over a cluster it shows the bounds of its markers.

marker_cluster:show_coverage_on_hover="no" [OPTIONAL]

marker_cluster:zoom_to_bounds_on_click

When you click a cluster we zoom to its bounds.

marker_cluster:zoom_to_bounds_on_click="yes" [OPTIONAL]

marker_cluster:spiderfy_on_max_zoom

When you click a cluster at the bottom zoom level we spiderfy it so you can see all of its markers.

marker_cluster:spiderfy_on_max_zoom="yes" [OPTIONAL]

marker_cluster:remove_outside_visible_bounds

Clusters and markers too far from the viewport are removed from the map for performance.

marker_cluster:remove_outside_visible_bounds="yes" [OPTIONAL]

div_class

the div CLASS name.

div_class="ee_gmap" [OPTIONAL]

width

the width of the map

width="400px" [OPTIONAL]

height

the height of the map

height="400px" [OPTIONAL]

overlay:html

Show a overlay on the map Overlay

overlay:html="<p><b>Maps Overlay</b></p>This is a Google Like overlay<p><p>Just like the Iframe</p>"  [OPTIONAL]

overlay:position

Set the position of the overlay.
values: left right

overlay:position="right" [OPTIONAL]

focus_current_location

Focus on the users current location. (SSL is needed)

focus_current_location="no" [OPTIONAL]

scroll_wheel

possible to scroll the map with the scrollwheel.

scroll_wheel="yes" [OPTIONAL]

zoom_control

place the zoom control on the map.

zoom_control="yes" [OPTIONAL]

zoom_control_position

Set the position for the control. Possible values are topleft, topright, bottomleft or bottomright

zoom_control_position="topleft" [OPTIONAL]

scale_control

place the scale control on the map.

scale_control="yes" [OPTIONAL]

gesture_handling

Prevents users from getting trapped on the map when scrolling a long page.

gesture_handling="yes" [OPTIONAL]

weather

Add a weather layer e.g. rain, snow, wind etc. (in order to use the weather layers, you need to obtain a API key from https://openweathermap.org/ and add it in the CP settings page)

Layers: clouds cloudsClassic precipitation precipitationClassic rain rainClassic snow pressure pressureContour temperature wind

weather="[[layer_name]:[opacity]:[legend]]," [OPTIONAL]
weather="rain:0.5:no" [OPTIONAL]

Tag Variables

Below are the Tag Variables. Those Variables can be used in the tag described above

map_id

The map ID of the current map

{exp:reinos_maps:map}
   {map_id}
{/exp:reinos_maps:map}