https://netfugl.dk/js/leaflet.js

1$(document).ready(function() {
2
3    var map, newMarker, longitude, latitude, latitudeId, longitudeId, orderNumber, existingCoordinateLatLng;
4
5    $(document).on('show.bs.modal', '#dkMapModal', function (e) {
6        if (map == undefined) {
7            prepareMap(6, true);
8        }
9        latitudeId="#latitude";
10        longitudeId="#longitude";
11    });
12
13    $(document).on('show.bs.modal', '#photoMapModal', function (e) {
14        if (map == undefined) {
15            prepareMap(5, true);
16        }
17        latitudeId="#latitude";
18        longitudeId="#longitude";
19    });
20
21    $(document).on('show.bs.modal', '#vpMapModal', function (e) {
22        if (map == undefined) {
23            prepareMap(4, true);
24        }
25        latitudeId="#latitude";
26        longitudeId="#longitude";
27    });
28
29    $(document).on('show.bs.modal', '#displayMapModal', function (e) {
30            if (map == undefined) {
31                prepareMap(6, false);
32            }
33            existingLat = $(e.relatedTarget).data('latitude');
34            existingLng = $(e.relatedTarget).data('longitude');
35            if (existingLat != undefined && existingLng != undefined) {
36                existingCoordinateLatLng = L.latLng(existingLat, existingLng);
37                setNewMarker(existingCoordinateLatLng);

38                map.setView([existingLat, existingLng], 13)
39            } else {
40                clearMarker();
41            }
42    });
43
44    $(document).on('show.bs.modal', '#rankingMapModal', function (e) {
45            if (map == undefined) {
46                prepareMap(6, true);
47            }
48
49            //clear old lat/long text
50            if ( $("#mapLatLng").length ) {
51                $("#mapLat").html("");
52                $("#mapLng").html("");
53            }
54
55            //get data-id attribute of the clicked element
56            birdId = $(e.relatedTarget).data('bird-id');
57            latitudeId="#latitude"+birdId;
58            longitudeId="#longitude"+birdId;
59
60            existingLat = $(e.relatedTarget).data('latitude');
61            existingLng = $(e.relatedTarget).data('longitude');
62            if (existingLat != undefined && existingLng != undefined) {
63                $("#mapLat").html(existingLat.toFixed(4));
64                $("#mapLng").html(existingLng.toFixed(4));
65                existingCoordinateLatLng = L.latLng(existingLat, existingLng);
66                setNewMarker(existingCoordinateLatLng);

67                map.setView([existingLat, existingLng], 12)
68            } else {
69                clearMarker();
70            }
71        });
72
73    function prepareMap(zoomLevel, isClickable) {
74        map = L.map('mapid').setView([55.939, 10.515], zoomLevel);
75        if (isClickable) {
76            map.on('click', onMapClick);
77        }
78
79        // add the OpenStreetMap tiles
80      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
81        maxZoom: 19,
82        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
83      }).addTo(map);
84
85      // show the scale bar on the lower left corner
86      L.control.scale().addTo(map);
87
88       //Makes sure tiles gets loaded correctly
89    setTimeout(() => {
90      map.invalidateSize();
91    }, 0);
92    }
93
94
95    function onMapClick(e) {
96
97        longitude = e.latlng.lng;
98        latitude = e.latlng.lat;
99
100        if( $("#mapLatLng").length ) {
101            $("#mapLat").html(latitude.toFixed(4));
102            $("#mapLng").html(longitude.toFixed(4));
103        }
104
105        setNewMarker(e.latlng);
106    }
107
108    function setNewMarker(markLatLng) {
109            //Clear existing marker
110            clearMarker();
111
112            // Add marker to map at click location; add popup window
113            newMarker = new L.marker(markLatLng).addTo(map);
114    }
115
116    function clearMarker() {
117        if (newMarker != undefined) {
118          map.removeLayer(newMarker);
119        };
120    }
121
122    $('#coordinateChosenButton').click(function() {
123        //Set Lat and Lon values
124        $(latitudeId).val(latitude);
125        $(longitudeId).val(longitude);
126        $('#showMapButton'+birdId).data('latitude', latitude).data('longitude', longitude);
127
128        if (birdId != undefined && latitude != undefined) {
129            //Change btn class for showMapButton
130            $('#showMapButton'+birdId).removeClass("btn-default").addClass("btn-success");
131        }
132    });
133
134});
135