WebExcess.OpenStreetMap for Neos CMS

Easy and flexible OpenStreetMap Implementation as NodeType or Fusion Component.

Installation

composer require webexcess/openstreetmap

Built for Neos

Implemented Styles

Original	Grayscale	Dark

Default JS & CSS

By default, this plugin loads a JS and CSS file.

It's best practice to include them in your custom builds and remove the default assets:

prototype(Neos.Neos:Page) {
  head.stylesheets.openStreetMap >
  body.javascripts.openStreetMap >
}

Editor Settings

# default
'WebExcess.OpenStreetMap:Map': superTypes: 'WebExcess.OpenStreetMap:Map.LatLon.Editable': true
'WebExcess.OpenStreetMap:Map': superTypes: 'WebExcess.OpenStreetMap:Map.Style': true
'WebExcess.OpenStreetMap:Map': superTypes: 'WebExcess.OpenStreetMap:Map.MaxZoom': true

Default Settings

WebExcess:
  OpenStreetMap:
    tilesUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    minZoom: 6
    maxZoom: 18
    style: ~ # ~, grayscale or dark
    ratio: '3:2'
    address: ~ # Talisker Distillery, Carbost, Scotland
    lat: ~ # 57.302387
    lon: ~ # -6.356159
    paddingTopLeft: [100, 100]
    paddingBottomRight: [100, 100]
    mapOptions: []

Fusion only Implementation

Disable NodeType

'WebExcess.OpenStreetMap:Map':
  abstract: true

Simple

map = WebExcess.OpenStreetMap:Map.Component {
  address = 'Talisker Distillery, Carbost, Scotland'
  tooltip = 'Talisker Distillery'
  popup = 'Also have a look at <a href=\\"https:\/\/unsplash.com\/search\/photos\/talisker-bay\\" target=\\"_blank\\">Talisker Bay<\/a>.'
}

Advanced

map = WebExcess.OpenStreetMap:Map.Component {
  lat = 57.302387
  lon = -6.356159
  style = 'dark'
  ratio = '4:1'
  renderer.content.customOverlay = Neos.Fusion:Tag {
      @position = 'after map'
      content = 'A Special Information..'
  }
}

GeoJSON

inline with multiple markers..

map = WebExcess.OpenStreetMap:Map.Component {
  json = '[{"type":"Feature","properties":{"tooltip":"Talisker Distillery"},"geometry":{"type":"Point","coordinates":[-6.356159,57.302387]}},{"type":"Feature","properties":{"popup":"Talisker Bay<br \/>&raquo; <a href=\\"https:\/\/unsplash.com\/search\/photos\/talisker-bay\\" target=\\"_blank\\">Photos<\/a>"},"geometry":{"type":"Point","coordinates":[-6.456646,57.283313]}}]'
}

or with an external source..

map = WebExcess.OpenStreetMap:Map.Component {
  json = '/talisker-geo.json'
}

EEL Helper

Geocode.latLonFromAddress('Talisker Distillery, Carbost, Scotland')

Interacting with JavaScript

Methods

mapIds = window.openStreetMap.getMapIds();
> Array [ "map-d8aaafcf-b2fa-4240-8a28-ed48b6e6143c", "map-b9ffb901-e91e-4261-a127-ec3246bc6350", .. ]

map = window.openStreetMap.getMap('map-d8aaafcf-b2fa-4240-8a28-ed48b6e6143c');
> { MapObject }

markers = window.openStreetMap.getMarkers('map-d8aaafcf-b2fa-4240-8a28-ed48b6e6143c');
> Array [ { MarkerObject }, { MarkerObject }, ... ]

Events

document.addEventListener('initializedOpenStreetMap', e => {
    console.log(e);
});
> { details: { map: { MapObject }, mapId: 'map-123..' }, ...DefaultEventProperties }

document.addEventListener('addedOpenStreetMapMarkers', e => {
    console.log(e);
});
> { details: { map: { MapObject }, mapId: 'map-123..', geoJson: { GeoJSON } }, ...DefaultEventProperties }

MarkerCluster Example

Load the Leaflet plugin..

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>

Register a JS hook..

prototype(WebExcess.OpenStreetMap:Map.Component) {
  mapHooks.addMarkersLayerHook = 'myAddMarkersLayerHook'
}

Load the plugin with your hook..

window.myAddMarkersLayerHook = (layer) => {
  const clusterMarkers = L.markerClusterGroup()
  return clusterMarkers.addLayer(layer)
}

Leaflet Map Options

See leafletjs.com

Via default settings

WebExcess:
  OpenStreetMap:
    mapOptions:
      scrollWheelZoom: true

Via Fusion

prototype(WebExcess.OpenStreetMap:Map.Component) {
  mapOptions {
    scrollWheelZoom = true
  }
}

Inspector Editor

Feel free to add custom Editors to enhance your Editors experience as he need's it.

Acknowledgements

Thanks to OpenStreetMap for providing free and open map data. And thanks to leafletjs.com for providing an open-source JS library for interactive maps.

---

developed by webexcess GmbH