https://github.com/webexcess/openstreetmap
Easy and flexible OpenStreetMap Implementation as NodeType or Fusion Component
https://github.com/webexcess/openstreetmap
contentelement neos neos-cms neos-plugin neoscms
Last synced: 5 months ago
JSON representation
Easy and flexible OpenStreetMap Implementation as NodeType or Fusion Component
- Host: GitHub
- URL: https://github.com/webexcess/openstreetmap
- Owner: webexcess
- License: mit
- Created: 2018-09-10T07:04:32.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2025-04-16T06:21:52.000Z (about 1 year ago)
- Last Synced: 2025-09-26T20:58:27.708Z (9 months ago)
- Topics: contentelement, neos, neos-cms, neos-plugin, neoscms
- Language: CSS
- Size: 859 KB
- Stars: 9
- Watchers: 2
- Forks: 7
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WebExcess.OpenStreetMap for Neos CMS
[](Documentation/logo-512.png)
[](https://packagist.org/packages/webexcess/openstreetmap)
[](https://packagist.org/packages/webexcess/openstreetmap)
Easy and flexible [OpenStreetMap](https://www.openstreetmap.org/) Implementation as NodeType or Fusion Component.
## Installation
```
composer require webexcess/openstreetmap
```
Built for [Neos](https://www.neos.io/)
## 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 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
» 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..
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](https://leafletjs.com/reference-1.3.4.html#map-option)
**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](https://www.openstreetmap.org/) for providing free and open map data. And thanks to [leafletjs.com](https://leafletjs.com/) for providing an open-source JS library for interactive maps.
------------------------------------------
developed by [webexcess GmbH](https://webexcess.ch/)