webexcess/openstreetmap

Last activity on 12 December 2020
  • 8
  • 5
  • 4095
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

Version
1.3.1
Type
neos-plugin
Release Date
16.12.2020 07:21:14
Source
git
Distribution
zip
Requires
Requires (dev)
None
Suggest
None
Provides
None
Conflicts
None
Replaces
None
MIT 19195ca099554259cd75d5150fdb08840eea4c68

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

Supported for Neos 3.x, 4.x and 5.x

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

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 }

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

The content of the readme is provided by Github
The same vendor provides 9 package(s).