Google Maps plugin for Craft CMS

GeoJSON Layers

If your shapes are already in GeoJSON (opens new window) format, you can draw them directly onto a dynamic map. GeoJSON is a common format for points, lines, and polygons, and most mapping tools are able to export it.

The geoJson method is part of the Universal API, so you can use it in any available language...

map.geoJson(source, options);

# The source parameter

The source can be any of the following...

  • The URL of a GeoJSON file.
  • A JSON string of GeoJSON data.
  • The GeoJSON data itself (an object in JavaScript, a hash in Twig, or an array in PHP).

Most often, you'll be loading a GeoJSON file...

// Add a GeoJSON layer to the map
map.geoJson('/files/parks.geojson', {'id': 'my-geojson'});

The file is fetched by the visitor's browser, so relative and local URLs work just fine. However, a file hosted on another domain may not load. See Files on another domain...

If the GeoJSON is stored in a plain text field, you can pass the field value straight in...

{# Add the GeoJSON stored on an entry #}
{% do map.geoJson(entry.myGeoJsonField) %}

Or you can build the data by hand...

map.geoJson({
    'type': 'Feature',
    'geometry': {
        'type': 'Point',
        'coordinates': [-64.7527469, 32.3113966]
    },
    'properties': {
        'name': 'Bermuda'
    }
});

Longitude comes first

GeoJSON coordinates are written as [longitude, latitude], which is the reverse of how coordinates are written everywhere else in this plugin.

# The options parameter

All options are optional.

Option Type Description
id string Reference point for each GeoJSON layer.
preserveViewport bool If true, the map will not zoom to fit the layer once it loads.
suppressInfoWindows bool If true, clicking a shape will not open an info window.
clickable bool If false, the layer will ignore clicks entirely (and no info windows will open).
zIndex int Stacking order of the layer, relative to other layers.
style object Any google.maps.Data.StyleOptions (opens new window) properties. Overrides the styles from the GeoJSON data.

Once the layer has loaded, the map will zoom to show the entire layer (unless you set preserveViewport).

# Styling the shapes

Each shape can carry its own style in its properties, using the simplestyle (opens new window) property names...

  • stroke - Line color.
  • stroke-width - Line width.
  • stroke-opacity - Line opacity.
  • fill - Fill color.
  • fill-opacity - Fill opacity.
  • icon - URL of a custom icon for a point.

To apply the same style to every shape in the layer, use the style option instead. It will override any styles from the data itself.

map.geoJson(source, {
    'style': {
        strokeColor: '#226666',
        strokeWeight: 2,
        fillColor: '#226666',
        fillOpacity: 0.35
    }
});

In JavaScript, the style option can also be a styling function (opens new window), which receives each shape and returns its style.

# Info windows

Clicking a shape will open an info window showing its name and description properties. Any HTML in the description is sanitized before it's shown.

To turn the info windows off, set suppressInfoWindows to true.

# Hiding or showing a GeoJSON layer

To dynamically hide or show a GeoJSON layer, use hideGeoJson and showGeoJson...

// Hide the GeoJSON layer
map.hideGeoJson('my-geojson');

// Show the GeoJSON layer
map.showGeoJson('my-geojson');

# Beyond hiding and showing

When you need to do more than hide or show a layer, you can get the raw Google Data layer object (opens new window), and manipulate it further using Google's own API.

This method is only available in JavaScript.

// Get the raw Google Data layer object
const geoJson = map.getGeoJson('my-geojson');

← GPX Tracks →