https://ssp-vpod.ch/site/modules/FieldtypeLeafletMapMarker/MarkupLeafletMap.js

1/**
2 * ProcessWire Leaflet Map Markup (JS)
3 *
4 * Renders maps for the FieldtypeLeafletMapMarker module
5 *
6 * ProcessWire 2.x
7 * Port of Google Map Markup by Ryan Cramer
8 * Copyright (C) 2013 by Ryan Cramer
9
10 * Copyright (C) 2015 by Mats Neander
11 * Licensed under GNU/GPL v2, see LICENSE.TXT
12 *
13 * http://processwire.com
14 *
15 * Javascript Usage:
16 * =================
17 * var map = new jsMarkupLeafletMap();
18 * map.setOption('any-leaflet-maps-option', 'value');
19 * map.setOption('zoom', 12); // example
20 *
21 * // init(container ID, latitude, longitude):
22 * map.init('#map-div', 26.0936823, -77.5332796);
23 *
24 * // addMarker(latitude, longitude, optional URL, optional URL to icon file):
25 * map.addMarker(26.0936823, -77.5332796, 'en.wikipedia.org/wiki/Castaway_Cay', '');
26 * map.addMarker(...you may have as many of these as you want...);
27 *
28 * // optionally fit the map to the bounds of the markers you added
29 * map.fitToMarkers();
30 *
31 */
32
33function jsMarkupLeafletMap() {
34
35    this.map = null;
36    this.markers = [];
37    this.numMarkers = 0;
38
39    this.options = {
40        zoom: 10,
41        center: null,
42    };
43
44    this._currentURL = '';
45    this.init = function(mapID, lat, lng, provider) {
46        if(lat != 0) this.map = L.map(mapID, {center: [lat, lng], zoom: this.options.zoom, scrollWheelZoom: this.options.scrollWheelZoom,} );
47        L.tileLayer.provider(provider).addTo(this.map);
48    }
49
50    this.setOption = function(key, value) {
51        this.options[key] = value;
52    }
53
54    var markers = new L.MarkerClusterGroup({polygonOptions: {color: 'teal', weight: 1, opacity: .39, lineJoin: 'round'}});
55    var marker = '';
56
57    this.addMarker = function(lat, lng, url, title, extra) {
58        if(lat == 0.0) return;
59
60        var latLng = L.latLng(lat, lng);
61
62        var markerOptions = {
63            linkURL: '',
64            title: title
65        };
66
67        marker = L.marker(latLng, markerOptions);
68        markers.addLayer(marker);
69        this.map.addLayer(markers);
70        this.markers[this.numMarkers] = marker;
71        this.numMarkers++;
72
73        if(url.length > 0) {
74            marker.linkURL = url;
75            if (extra.length > 0) {
76                extra = '<br />' + extra;
77            }
78            marker.bindPopup("<b><a href='" + marker.linkURL + "'>" + title + "</a></b>" + extra);
79        }
80    }
81
82
83    this.addMarkerIcon = function(icon, lat, lng, url, title, extra) {
84        if(lat == 0.0) return;
85
86        var latLng = L.latLng(lat, lng);
87
88        marker = L.marker(latLng, {icon: icon, linkURL: '', title: title});
89        markers.addLayer(marker);
90        this.map.addLayer(markers);
91        this.markers[this.numMarkers] = marker;
92        this.numMarkers++;
93
94        if(url.length > 0) {
95            marker.linkURL = url;
96
97            if (extra.length > 0) {
98                extra = '<br />' + extra;
99            }
100            marker.bindPopup("<b><a href='" + marker.linkURL + "'>" + title + "</a></b>" + extra);
101        }
102    }
103
104
105    this.fitToMarkers = function() {
106        var map = this.map;
107        var mg = [];
108        for(var i = 0; i < this.numMarkers; i++) {
109            mg.push(this.markers[i].getLatLng());
110        }
111
112        map.fitBounds(mg);
113    }
114
115
116    this.setMaxZoom = function() {
117        var map = this.map;
118        map.setZoom(this.options['zoom']);
119    }
120}