webexcess/openstreetmap
composer require webexcess/openstreetmap
Easy and flexible OpenStreetMap Implementation as NodeType or Fusion Component
1.3.1
Easy and flexible OpenStreetMap Implementation as NodeType or Fusion Component
WebExcess.OpenStreetMap for Neos CMS
Easy and flexible OpenStreetMap Implementation as NodeType or Fusion Component.
Installation
composer require webexcess/openstreetmap
Supported for Neos 3.x, 4.x and 5.x
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': |
 |
'WebExcess.OpenStreetMap:Map': |
 |
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 \/>» <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 }
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