PHPackages webexcess/openstreetmap - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. webexcess/openstreetmap ActiveNeos-plugin[Utility & Helpers](/categories/utility) webexcess/openstreetmap ======================= Easy and flexible OpenStreetMap Implementation as NodeType or Fusion Component 1.4.1(1y ago)948.7k↓37.5%7[15 PRs](https://github.com/webexcess/openstreetmap/pulls)MITCSS Since Sep 10Pushed 1y ago2 watchersCompare [ Source](https://github.com/webexcess/openstreetmap)[ Packagist](https://packagist.org/packages/webexcess/openstreetmap)[ RSS](/packages/webexcess-openstreetmap/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (8)Dependencies (1)Versions (27)Used By (0) WebExcess.OpenStreetMap for Neos CMS ==================================== [](#webexcessopenstreetmap-for-neos-cms) [![Logo](Documentation/logo-20.png)](Documentation/logo-512.png)[![Latest Stable Version](https://camo.githubusercontent.com/e458fb1855a597fd01adcb6ca7d59cc08d6ce9ccd8a5f76da0bc9ab45da68820/68747470733a2f2f706f7365722e707567782e6f72672f7765626578636573732f6f70656e7374726565746d61702f762f737461626c65)](https://packagist.org/packages/webexcess/openstreetmap)[![License](https://camo.githubusercontent.com/b44c68913493ec661b4893bae98a24de574231fb16ccf4fd46f9f68966a65312/68747470733a2f2f706f7365722e707567782e6f72672f7765626578636573732f6f70656e7374726565746d61702f6c6963656e7365)](https://packagist.org/packages/webexcess/openstreetmap) Easy and flexible [OpenStreetMap](https://www.openstreetmap.org/) Implementation as NodeType or Fusion Component. Installation ------------ [](#installation) ``` composer require webexcess/openstreetmap ``` Built for [Neos](https://www.neos.io/) Implemented Styles ------------------ [](#implemented-styles) OriginalGrayscaleDark[![Original Map Style](Documentation/map-style-original.png?raw=true "Original Map Style")](Documentation/map-style-original.png?raw=true)[![Original Map Style](Documentation/map-style-grayscale.png?raw=true "Original Map Style")](Documentation/map-style-grayscale.png?raw=true)[![Original Map Style](Documentation/map-style-dark.png?raw=true "Original Map Style")](Documentation/map-style-dark.png?raw=true)**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 --------------- [](#editor-settings) ``` # default ``` [![Editor Default](Documentation/editor-default.png?raw=true "Editor Default")](Documentation/editor-default.png?raw=true)``` 'WebExcess.OpenStreetMap:Map': superTypes: 'WebExcess.OpenStreetMap:Map.LatLon.Editable': true ``` [![Editor LatLon](Documentation/editor-latlon.png?raw=true "Editor LatLon")](Documentation/editor-latlon.png?raw=true)``` 'WebExcess.OpenStreetMap:Map': superTypes: 'WebExcess.OpenStreetMap:Map.Style': true ``` [![Editor Style](Documentation/editor-style.png?raw=true "Editor Style")](Documentation/editor-style.png?raw=true)``` 'WebExcess.OpenStreetMap:Map': superTypes: 'WebExcess.OpenStreetMap:Map.MaxZoom': true ``` [![Editor Maximum Zoom](Documentation/editor-maxzoom.png?raw=true "Editor Maximum Zoom")](Documentation/editor-maxzoom.png?raw=true)Default Settings ---------------- [](#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 -------------------------- [](#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.' } ``` **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"},"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 --------------------------- [](#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 --------------------- [](#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 ------------------- [](#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 ---------------- [](#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/) ### Health Score 47 — FairBetter than 94% of packages Maintenance47 Moderate activity, may be stable Popularity37 Limited adoption so far Community16 Small or concentrated contributor base Maturity72 Established project with proven stability Bus Factor1 Top contributor holds 78.1% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~267 days Recently: every ~395 days Total 10 Last Release 398d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/bdc5710fe83fa49841c7cb3e78547601637f220833db59d268302803317dcbc2?d=identicon)[webexcess](/maintainers/webexcess) --- Top Contributors [![sbruggmann](https://avatars.githubusercontent.com/u/1162368?v=4)](https://github.com/sbruggmann "sbruggmann (25 commits)")[![dlubitz](https://avatars.githubusercontent.com/u/13046100?v=4)](https://github.com/dlubitz "dlubitz (3 commits)")[![andrehoffmann30](https://avatars.githubusercontent.com/u/23524251?v=4)](https://github.com/andrehoffmann30 "andrehoffmann30 (2 commits)")[![daniellienert](https://avatars.githubusercontent.com/u/642226?v=4)](https://github.com/daniellienert "daniellienert (1 commits)")[![Pneum](https://avatars.githubusercontent.com/u/968719?v=4)](https://github.com/Pneum "Pneum (1 commits)") --- Tags contentelementneosneos-cmsneos-pluginneoscms ### Embed Badge ![Health badge](/badges/webexcess-openstreetmap/health.svg) ``` [![Health](https://phpackages.com/badges/webexcess-openstreetmap/health.svg)](https://phpackages.com/packages/webexcess-openstreetmap) ``` ### Alternatives [sitegeist/monocle An living-styleguide for Neos that is based on the actual fusion-code 45315.9k10](/packages/sitegeist-monocle)[sitegeist/kaleidoscope Responsive-images for Neos 29352.4k10](/packages/sitegeist-kaleidoscope)[flowpack/listable Tiny extension for listing things 35209.0k7](/packages/flowpack-listable)[kaufmanndigital/gdpr-cookieconsent A ready-to-run package, that integrates an advanced cookie consent banner into your Neos CMS site. 2540.7k](/packages/kaufmanndigital-gdpr-cookieconsent)[neos/seo SEO configuration and tools for Neos 13990.5k24](/packages/neos-seo)[shel/neos-colorpicker A plugin for Neos CMS which provides a colorpicker editor 1494.4k6](/packages/shel-neos-colorpicker) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)