https://www.sprintz.com/js/libs/leaflet/leaflet-map-app.js

1"use strict";
2var LeafletMap = function () {
3
4    var map;
5    var markerLayerGroupsData;
6    var mapBoxAPIKey;
7
8    var setMapBoxAPIKey = function (mapBoxAPIKey) {
9        mapBoxAPIKey = mapBoxAPIKey;
10    }
11    var redIcon = new L.Icon({
12        iconUrl: 'https://images.furnituredealer.net/img/leaflet/marker-icon-2x-red.png',
13        shadowUrl: 'https://images.furnituredealer.net/img/leaflet/marker-shadow.png',
14        iconSize: [25, 41],
15        iconAnchor: [12, 41],
16        popupAnchor: [1, -34],
17        shadowSize: [41, 41]
18    });
19
20    var blueIcon = new L.Icon({
21        iconUrl: 'https://images.furnituredealer.net/img/leaflet/marker-icon-2x-blue.png',
22        shadowUrl: 'https://images.furnituredealer.net/img/leaflet/marker-shadow.png',
23        iconSize: [25, 41],
24        iconAnchor: [12, 41],
25        popupAnchor: [1, -34],
26        shadowSize: [41, 41]
27    });
28
29    var greenIcon = new L.Icon({
30        iconUrl: 'https://images.furnituredealer.net/img/leaflet/marker-icon-2x-green.png',
31        shadowUrl: 'https://images.furnituredealer.net/img/leaflet/marker-shadow.png',
32        iconSize: [25, 41],
33        iconAnchor: [12, 41],
34        popupAnchor: [1, -34],
35        shadowSize: [41, 41]
36    });
37    
38    var iconArr = [redIcon, blueIcon];
39
40    var InitMap = function () {
41
42        var locationLayers = {};
43        var showOnLoadLayers = [];
44
45        // make a Leaflet FeatureGroup for each set of locations that was passed in
46        for (var i = 0; i < markerLayerGroupsData.length; i++) {
47            var title = markerLayerGroupsData[i].Title;
48
49            locationLayers[title] = createFeatureGroup(markerLayerGroupsData[i]);
50
51            if (markerLayerGroupsData[i].ShowOnLoad) {
52                showOnLoadLayers.push(locationLayers[title]);
53            }
54        }
55
56        // Add ShowOnLoad layers to map
57        map = L.map('map', {
58            layers: showOnLoadLayers
59        });
60
61        // Add map tiles
62        createMapBoxTileLayer(map);
63
64        // Set the initial map bounds to match the locations in the Selected Locations group
65        var cBounds = locationLayers["Contact Location"].getBounds();
66
67        map.fitBounds(cBounds);
68        //map.setZoom(13);
69
70        // Re-measure after layout (e.g. viewport-height containers) so tiles fill correctly
71        requestAnimationFrame(function () {
72            invalidateSize();
73        });
74        
75        // geolocation plugin control
76        var lc = L.control.locate({

77            metric: false,
78            drawCircle: false,
79            drawMarker: false
80        }).addTo(map);
81        
82        // leaflet stuff for when the location is found
83        function onLocationFound(e, markerIcon) {
84            
85            var radius = e.accuracy;
86            var markerIcon = greenIcon;
87            
88            map.fitBounds([
89                [e.latlng.lat, e.latlng.lng],
90                [markerLayerGroupsData[0].Markers[0].lat, markerLayerGroupsData[0].Markers[0].lng]
91            ]);
92
93            var myDirections = markerLayerGroupsData[0].Markers[0].directions + '&origin=' + e.latlng.lat + ',' + e.latlng.lng;
94
95            L.marker(e.latlng, {icon: markerIcon}).addTo(map)
96            .bindPopup('<div class="leaflet-popup-store-title"><a href="' + myDirections + '" target="_blank" rel="noopener">Get Directions From Your Location</a></div>');
97        }
98
99        map.on('locationfound', onLocationFound);
100
101        // error message if geolocation not found
102        function onLocationError(e) {
103            alert(e.message);
104        }
105
106        map.on('locationerror', onLocationError);
107    };
108
109    var invalidateSize = function () {
110        if (map) {
111            map.invalidateSize({ debounceMoveend: true });
112        }
113    };
114    
115    function createMapBoxTileLayer(map) {
116
117        // create the tile layer with correct attribution
118        var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
119			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
120
121        if (mapBoxAPIKey) {
122            mbAttr += ', Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
123            var mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}

123.png?access_token=' + mapBoxAPIKey;
124        } else {
125            var mbUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
126        }
127
128        var mbm = new L.TileLayer(mbUrl, { id: 'mapbox.streets', maxZoom: 16, attribution: mbAttr });
129        map.addLayer(mbm);
130    }
131    
132
133    // create pin and popup
134    function createFeatureGroup(layerData) {
135        var featureGroup = L.featureGroup();
136        var markerIcon;
137
138        for (var i = 0; i < layerData.Markers.length; i++) {
139            
140            //checking for warehouse
141            if (layerData.Markers[i].locationType == 2) {
142                markerIcon = blueIcon;
143            }
144            else {
145                markerIcon = redIcon;
146            }
147
148            L.marker([layerData.Markers[i].lat, layerData.Markers[i].lng], {icon: markerIcon})
149            .bindPopup(
150                '<div class="leaflet-popup-store-title">' + layerData.Markers[i].storeName + '</div>' +
151                layerData.Markers[i].storeAddress + 
152                '<div class="leaflet-popup-directions">' + 
153                '<a href="' + layerData.Markers[i].directions + '" target="_blank" rel="noopener">Get Directions</a></div>'
154
155            ).addTo(featureGroup);
156        }
157
158        return featureGroup;
159    }
160
161    function markerOnClick(e) {
162        // show store details
163        var infoBox = $('#storeInfo' + e.sourceTarget.options.alt).clone();
164        $('.map-store-info__popup').hide(function () {
165            $('.map-store-info__popup').html(infoBox).show();
166        });
167    }
168
169    function showVisibleMarkers() {
170        var shownStores = 0;
171        var bounds = map.getBounds();
172
173        map.eachLayer(function (layer) {
174            var markerId = layer.options.alt;
175
176            // check if this is a marker and not some other element on the layer
177            if (typeof (markerId) !== "undefined") {
178                if (bounds.contains(layer.getLatLng())) {
179                    $('#storeInfo' + markerId).show();
180                    shownStores++;
181                } else {
182                    $('#storeInfo' + markerId).hide();
183                }
184            }
185        });
186
187        $('.result-count__shown').html(shownStores);
188    }
189
190    var SetMapData = function (mapData) {
191        markerLayerGroupsData = mapData;
192    };
193
194    return {
195        InitMap: InitMap,
196        SetMapData: SetMapData,
197        SetMapBoxAPIKey: setMapBoxAPIKey,
198        InvalidateSize: invalidateSize
199    }
200}();