Data / GeoJSON

GeoJSON (opens new window) is an open standard format designed for representing simple geographical features, along with their non-spatial attributes. It can be used in Google Maps, and now in this libary using two new components: GmapsData, and GmapsDataGeoJson.

Because of how Google implements this feature, this library limits you to only one GmapsData element per map. That element will take any global styles and emit all the event listeners. The GmapsDataGeoJson is the element where actual GeoJSON data can be added, along with any overriding styles.

The full Google Maps API for Data (opens new window) has not been incorporated (no drawing yet), but it's certainly able to display any GeoJSON you have.

GmapsData supports the following events: @click, contextmenu, @dblclick, mousedown, mouseout, mouseover, mouseup, rightclick (which are most of those available (opens new window))

Each returns Google's google.maps.data.MouseEvent which includes the feature hit and latLng.

GmapsData presently only takes an options prop which is of type google.maps.data.StyleOptions (opens new window). This will effectively be the default style for all Features imported into the data. To override this, you need to set the options for the individual Feature in the GmapsDataGeoJson component.

GmapsDataGeoJson does not have events (all events are emited together from the GmapsData if you include it).

GmapsData also only takes an options prop which is of type google.maps.data.StyleOptions (opens new window). This is the override style for the Feature(s) defined in this component..

Props	Type	Default	Description
geoJson	Object	-	A parsed GeoJSON object
options	google.maps.data.StyleOptions (opens new window)	-	This is the override style for the Feature(s) defined in this component.

<template>
  <gmaps-map>
    <gmaps-data>
      <gmaps-data-geo-json :geo-json="geoJson" />
      <gmaps-data-geo-json :geo-json="geoJson2" :options="geoJson2Style" />
    </gmaps-data>
  </gmaps-map>
</template>

<script>
  import { gmapsMap, gmapsData, gmapsDataGeoJson } from 'x5-gmaps';

  import geoJson from '../data/geoJsonData.json';
  import geoJsonL from '../data/geoJsonDataL.json';

  export default {
    name: 'ExampleGeoJson',
    components: { gmapsMap, gmapsData, gmapsDataGeoJson },
    data: () => ({
      geoJson,
      geoJsonL,
      geoJsonLStyle: { fillColor: 'black' }
    })
  };
</script>