Skip to content

Easy and flexible OpenStreetMap Implementation as NodeType or Fusion Component

License

Notifications You must be signed in to change notification settings

webexcess/openstreetmap

Repository files navigation

WebExcess.OpenStreetMap for Neos CMS

Logo Latest Stable Version License

Easy and flexible OpenStreetMap Implementation as NodeType or Fusion Component.

Installation

composer require webexcess/openstreetmap

Built for Neos

Implemented Styles

Original Grayscale Dark
Original Map Style Original Map Style Original Map Style

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
Editor Default
'WebExcess.OpenStreetMap:Map':
superTypes:
'WebExcess.OpenStreetMap:Map.LatLon.Editable': true
Editor LatLon
'WebExcess.OpenStreetMap:Map':
superTypes:
'WebExcess.OpenStreetMap:Map.Style': true
Editor Style
'WebExcess.OpenStreetMap:Map':
superTypes:
'WebExcess.OpenStreetMap:Map.MaxZoom': true
Editor Maximum Zoom

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/leaflet.markercluster@1.1.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.Default.css" />
<script type="text/javascript" src="https://unpkg.com/leaflet.markercluster@1.1.0/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