Easy and flexible OpenStreetMap Implementation as NodeType or Fusion Component.
composer require webexcess/openstreetmap
Supported for Neos 3.x, 4.x and will be maintained for upcoming versions.
| 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 >
}
# default |
 |
'WebExcess.OpenStreetMap:Map': |
 |
'WebExcess.OpenStreetMap:Map': |
 |
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: []
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')
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 }
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.
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent