I wanted a collaborative map, where users can add markers with description and link to a page. For events, or anything else !
Embed map and add markers with leaflet & Openstreetmap - Plugin for Yellow CMS - https://github.com/datenstrom
http://leafletjs.com - An open-source JavaScript library for mobile-friendly interactive maps
https://github.com/Leaflet/Leaflet.markercluster - Marker Clustering plugin for Leaflet
- Download and install Yellow.
- Download plugin. If you are using Safari, right click and select 'Download file as'.
- Copy
master.zip
into yoursystem/plugins
folder.
To uninstall delete the plugin files.
Create a [leaflet]
shortcut to embed the map.
To change the default values, following arguments are available:
LONGITUDE
= set view center, default is 48.000
LATITUDE
= set view center, default is 2.000
HEIGHT
= map height, pixel, default is 500px
ZOOM
= zoom value, default is 5, max is 18
You can also change default values in your configuration.
Create a [marker longitude latitude]
shortcut to add marker on the map.
The following arguments are available:
LONGITUDE
= set longitude for the marker
LATITUDE
= set latitude for the marker
CITY
= name your city or anything else, in bold - wrap multiple words into quotes
ADRESS
= precise address or anything else - wrap multiple words into quotes
TEXTLINK
= description for the link - wrap multiple words into quotes
URL
= url for the link, absolute or relative
- Go to openstreetmap.org and enter your adress
- Look the url in the browser:
https://www.openstreetmap.org/way/5013364#map=5/48.000/2.000
- Longitude and latitude are the last numbers : 48.000 2.000
To be more precise, use the query features as explained on this blog post
Embedding a map:
[leaflet]
[leaflet 48.000 2.000]
[leaflet 48.000 2.000 300px 4]
Adding markers on the map:
[marker 52.5175 13.3882 Berlin]
[marker 48.85828 2.29450 "Paris, France" "Eiffel Tower"]
[marker 51.495 -0.083 London "Capital of England" "More on Wikipedia" https://en.wikipedia.org/wiki/London]
Go to your system/config/config.ini
file and change this line:
LeafletJs: https://unpkg.com/leaflet@1.1.0/dist/leaflet.js
LeafletCss: https://unpkg.com/leaflet@1.1.0/dist/leaflet.css
ClusterJs: https://unpkg.com/leaflet.markercluster@1.0.6/dist/leaflet.markercluster.js
ClusterCss: https://unpkg.com/leaflet.markercluster@1.0.6/dist/MarkerCluster.css
ClusterCssDefault: https://unpkg.com/leaflet.markercluster@1.0.6/dist/MarkerCluster.Default.css
FullscreenCss: https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css
FullscreenJs: https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js
LeafletLongitude: 48.000
LeafletLatitude: 2.000
LeafletHeight: 500px
LeafletZoom: 15