map.js ➔ addAllWanders - Code Metrics - Inspection of "Add loading spinner for general Leaflet data loadi..." - gothick/omm - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( a263a3...71e64a )

by Matt

created 2021-05-09 18:17 UTC

map.js ➔ addAllWanders B

↳ Parent: public/js/map.js

Complexity

Conditions

Size

Total Lines	46
Code Lines	32

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	8
eloc	32
dl	0
loc	46
rs	7.2453
c	0
b	0
f	0

// TODO: Refactor the heck out of this mess

/* LeafletJS and Omnivore */
/** global: L */
/** global: omnivore */
/*global L, omnivore */ /* For ESLint */

var streetMap;
var satelliteMap;


var base = L.latLng($("#mapid").data("homebaseLat"), $("#mapid").data("homebaseLng"));

function setUpMap(options)
{
    var mapboxAccessToken = $("#mapid").data("mapboxAccessToken");
    var locusRadius = 1609.34; // 1 mile

    streetMap = L.tileLayer(
        "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}@2x?access_token=" + mapboxAccessToken,
        {
            // These are mapbox-specific
            id: "gothick/ckhb31na304g619t67r3gcngx",
            tileSize: 512,
            zoomOffset: -1,
            // More general
            maxZoom: 19,
            attribution: "Map data &copy; <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>"
        });

    satelliteMap = L.tileLayer(
        "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}@2x?access_token=" + mapboxAccessToken,
        {
            // These are mapbox-specific
            id: "gothick/ckhwgr59r0uai19o077hp87w4",
            tileSize: 512,
            zoomOffset: -1,
            // More general
            maxZoom: 19,
            attribution: "Map data &copy; <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>"
        });

    var circle = L.circle(base, {
        color: "green",
        fillColor: "#faa",
        fillOpacity: 0.15,
        radius: locusRadius,
        interactive: false
    });

    // Because Object.assign isn't supported in older browsers
    // https://stackoverflow.com/a/41455739/300836
    $.extend(options, {
        maxBounds: base.toBounds(locusRadius * 5), // Give a bit of wiggle room around the circle, but don"t let the user drift too far away
        layers: [streetMap, circle],
        loadingControl: true, // https://github.com/ebrelsford/Leaflet.loading
    });

    var map = L.map("mapid", options)
        .setView(base, 14);

    var baseMaps = {
        "Satellite": satelliteMap,
        "Streets": streetMap
    };

    L.control.layers(baseMaps).addTo(map);
    L.control.scale().addTo(map);

    L.control.locate().addTo(map);

    return map;
}

function selectedWanderStyle() {
    return {
        color: "#FFA500"
    };
}

function unselectedWanderStyle() {
    return {
        color: "#3388FF"
    };
}

var currentlySelected = null;

var CustomGeoJSON = L.GeoJSON.extend({
    options: {
        // TODO: Do we need to go to all this trouble to keep the wander id
        // handy? Maybe we could just capture it in the bindPopup closure?
        wanderId: null
    }
 });

 var photoLayer = null;

 function addPhotos(map, photos)
 {
     if (photoLayer) {
         map.removeLayer(photoLayer);
     }

     photoLayer = L.photo.cluster().on("click", function(evt) {
         var photo = evt.layer.photo;
         var template = "<a href='{imageShowUri}'><img src='{url}' width='300' /></a><p>{caption}</p>";
         // TODO: Video
         evt.layer.bindPopup(L.Util.template(template, photo), {
             className: "leaflet-popup-photo",
             minWidth: 300
         }).openPopup();
     });

     photoLayer.add(photos).addTo(map);
 }

 function addWanderImages(map, wanderId) {
    var photos = [];

    // Our API allows us to grab only those photos with co-ordinates set
    $.getJSON("/api/wanders/" + wanderId + "/images?exists[latlng]=true", function(images) {
        $.each(images["hydra:member"], function(key, image) {
            photos.push({
                lat: image.latlng[0],
                lng: image.latlng[1],
                url: image.mediumImageUri,
                caption: image.title || "",
                thumbnail: image.markerImageUri,
                imageShowUri: image.imageShowUri,
                // TODO?
                video: null
            });
        });
        addPhotos(map, photos);
    });
}

function addAllWanders(map)
{
    map.fireEvent('dataloading');
    // TODO: We should probably use some kind of Hydra client. This"ll do for now.
    $.getJSON("/api/wanders", function(data) {

        var last = data["hydra:totalItems"];
        var deferreds = [];
        $.each(data["hydra:member"], function(key, wander) {
            var isLastWander = (last - 1 === key);
            var track = omnivore.gpx(wander.gpxFilename,
                    null,
                    new CustomGeoJSON(null, {
                        wanderId: wander.id,
                        style: isLastWander ? selectedWanderStyle() : unselectedWanderStyle()
                    }))
                .bindPopup(function(layer) {
                    // Toggle styles
                    currentlySelected.setStyle(unselectedWanderStyle());
                    layer.setStyle(selectedWanderStyle());
                    layer.bringToFront();
                    currentlySelected = layer;

                    addWanderImages(map, layer.options.wanderId);
                    // Popup
                    var template = "<a href='{contentUrl}'>{title}</a>";
                    return L.Util.template(template, wander);
                });
            if (isLastWander) {
                currentlySelected = track;
            }
            track.wanderId = wander.id;
            track.addTo(map);
            var deferred = $.Deferred();
            deferreds.push(deferred);
            track.on("ready", function() {
                deferred.resolve();
            });
        });
        $.when.apply($, deferreds).then(function() {
            console.log('All loaded');

            currentlySelected.bringToFront();
            map.fireEvent("dataload");
        });
    });
}

function addWander(map, wanderId, addImages)
{
    $.getJSON("/api/wanders/" + wanderId, function(wander) {
        omnivore.gpx(wander.gpxFilename)
            .bindPopup(function(/* layer */) {
                return wander.title;
            })
            .addTo(map);
        // Based on the example at https://github.com/turban/Leaflet.Photo/blob/gh-pages/examples/picasa.html
        if (addImages) {
            addWanderImages(map, wanderId);
        }
    });
}


1			// TODO: Refactor the heck out of this mess
2
3			/* LeafletJS and Omnivore */
4			/** global: L */
5			/** global: omnivore */
6			/global L, omnivore / /* For ESLint */
7
8			var streetMap;
9			var satelliteMap;
10
11
12			var base = L.latLng($("#mapid").data("homebaseLat"), $("#mapid").data("homebaseLng"));
13
14			function setUpMap(options)
15			{
16			var mapboxAccessToken = $("#mapid").data("mapboxAccessToken");
17			var locusRadius = 1609.34; // 1 mile
18
19			streetMap = L.tileLayer(
20			"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}@2x?access_token=" + mapboxAccessToken,
21			{
22			// These are mapbox-specific
23			id: "gothick/ckhb31na304g619t67r3gcngx",
24			tileSize: 512,
25			zoomOffset: -1,
26			// More general
27			maxZoom: 19,
28			attribution: "Map data © <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>"
29			});
30
31			satelliteMap = L.tileLayer(
32			"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}@2x?access_token=" + mapboxAccessToken,
33			{
34			// These are mapbox-specific
35			id: "gothick/ckhwgr59r0uai19o077hp87w4",
36			tileSize: 512,
37			zoomOffset: -1,
38			// More general
39			maxZoom: 19,
40			attribution: "Map data © <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>"
41			});
42
43			var circle = L.circle(base, {
44			color: "green",
45			fillColor: "#faa",
46			fillOpacity: 0.15,
47			radius: locusRadius,
48			interactive: false
49			});
50
51			// Because Object.assign isn't supported in older browsers
52			// https://stackoverflow.com/a/41455739/300836
53			$.extend(options, {
54			maxBounds: base.toBounds(locusRadius * 5), // Give a bit of wiggle room around the circle, but don"t let the user drift too far away
55			layers: [streetMap, circle],
56			loadingControl: true, // https://github.com/ebrelsford/Leaflet.loading
57			});
58
59			var map = L.map("mapid", options)
60			.setView(base, 14);
61
62			var baseMaps = {
63			"Satellite": satelliteMap,
64			"Streets": streetMap
65			};
66
67			L.control.layers(baseMaps).addTo(map);
68			L.control.scale().addTo(map);
69
70			L.control.locate().addTo(map);
71
72			return map;
73			}
74
75			function selectedWanderStyle() {
76			return {
77			color: "#FFA500"
78			};
79			}
80
81			function unselectedWanderStyle() {
82			return {
83			color: "#3388FF"
84			};
85			}
86
87			var currentlySelected = null;
88
89			var CustomGeoJSON = L.GeoJSON.extend({
90			options: {
91			// TODO: Do we need to go to all this trouble to keep the wander id
92			// handy? Maybe we could just capture it in the bindPopup closure?
93			wanderId: null
94			}
95			});
96
97			var photoLayer = null;
98
99			function addPhotos(map, photos)
100			{
101			if (photoLayer) {
102			map.removeLayer(photoLayer);
103			}
104
105			photoLayer = L.photo.cluster().on("click", function(evt) {
106			var photo = evt.layer.photo;
107			var template = "<a href='{imageShowUri}'><img src='{url}' width='300' /></a><p>{caption}</p>";
108			// TODO: Video
109			evt.layer.bindPopup(L.Util.template(template, photo), {
110			className: "leaflet-popup-photo",
111			minWidth: 300
112			}).openPopup();
113			});
114
115			photoLayer.add(photos).addTo(map);
116			}
117
118			function addWanderImages(map, wanderId) {
119			var photos = [];
120
121			// Our API allows us to grab only those photos with co-ordinates set
122			$.getJSON("/api/wanders/" + wanderId + "/images?exists[latlng]=true", function(images) {
123			$.each(images["hydra:member"], function(key, image) {
124			photos.push({
125			lat: image.latlng[0],
126			lng: image.latlng[1],
127			url: image.mediumImageUri,
128			caption: image.title \|\| "",
129			thumbnail: image.markerImageUri,
130			imageShowUri: image.imageShowUri,
131			// TODO?
132			video: null
133			});
134			});
135			addPhotos(map, photos);
136			});
137			}
138
139			function addAllWanders(map)
140			{
141			map.fireEvent('dataloading');
142			// TODO: We should probably use some kind of Hydra client. This"ll do for now.
143			$.getJSON("/api/wanders", function(data) {
144
145			var last = data["hydra:totalItems"];
146			var deferreds = [];
147			$.each(data["hydra:member"], function(key, wander) {
148			var isLastWander = (last - 1 === key);
149			var track = omnivore.gpx(wander.gpxFilename,
150			null,
151			new CustomGeoJSON(null, {
152			wanderId: wander.id,
153			style: isLastWander ? selectedWanderStyle() : unselectedWanderStyle()
154			}))
155			.bindPopup(function(layer) {
156			// Toggle styles
157			currentlySelected.setStyle(unselectedWanderStyle());
158			layer.setStyle(selectedWanderStyle());
159			layer.bringToFront();
160			currentlySelected = layer;
161
162			addWanderImages(map, layer.options.wanderId);
163			// Popup
164			var template = "<a href='{contentUrl}'>{title}</a>";
165			return L.Util.template(template, wander);
166			});
167			if (isLastWander) {
168			currentlySelected = track;
169			}
170			track.wanderId = wander.id;
171			track.addTo(map);
172			var deferred = $.Deferred();
173			deferreds.push(deferred);
174			track.on("ready", function() {
175			deferred.resolve();
176			});
177			});
178			$.when.apply($, deferreds).then(function() {
179			console.log('All loaded');
			0 ignored issues – show Debugging Code introduced 2021-05-08 21:13 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
180			currentlySelected.bringToFront();
181			map.fireEvent("dataload");
182			});
183			});
184			}
185
186			function addWander(map, wanderId, addImages)
187			{
188			$.getJSON("/api/wanders/" + wanderId, function(wander) {
189			omnivore.gpx(wander.gpxFilename)
190			.bindPopup(function(/* layer */) {
191			return wander.title;
192			})
193			.addTo(map);
194			// Based on the example at https://github.com/turban/Leaflet.Photo/blob/gh-pages/examples/picasa.html
195			if (addImages) {
196			addWanderImages(map, wanderId);
197			}
198			});
199			}
200

gothick / omm

Push — master ( a263a3...71e64a )

map.js ➔ addAllWanders B

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like