From 05238dc5aec332970a082b84d174240c4262e95d Mon Sep 17 00:00:00 2001 From: Markus Koch Date: Mon, 27 Apr 2020 17:37:12 +0200 Subject: Add categories for markers This commit obsoletes the many fetch scripts and combines them into a single script, creating a single json, but with category information. --- htdocs/mapscript.js | 88 ++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 70 insertions(+), 18 deletions(-) (limited to 'htdocs') diff --git a/htdocs/mapscript.js b/htdocs/mapscript.js index 30e066a..ee47f0a 100644 --- a/htdocs/mapscript.js +++ b/htdocs/mapscript.js @@ -173,8 +173,7 @@ function load_tiles(name, id) { var current_location = ""; var current_feature = null; - -function load_geojson(name, url, iconname, iconcolor, active=1, style={}) { +function load_geojson(name, url, geotype, iconcolor, active=1, style={}) { var xhttp_ps = new XMLHttpRequest(); xhttp_ps.onreadystatechange = function() { if (this.readyState == 4) { @@ -183,10 +182,10 @@ function load_geojson(name, url, iconname, iconcolor, active=1, style={}) { pointToLayer = null; filter = null; - switch (iconname) { + switch (geotype) { case "street": onEachFeature = function(feature, layer) { - layer.myTag = iconname; + layer.myTag = geotype; layer.myName = name; layer.on("click", function (e) { current_feature = feature; @@ -195,7 +194,7 @@ function load_geojson(name, url, iconname, iconcolor, active=1, style={}) { break; case "outline": onEachFeature = function(feature, layer) { - layer.myTag = iconname; + layer.myTag = geotype; layer.myName = name; layer.on("click", function (e) { current_location = feature.properties.name; @@ -214,7 +213,55 @@ function load_geojson(name, url, iconname, iconcolor, active=1, style={}) { }; pointToLayer = function(feature, latlng) { label = String(feature.properties.name) - return new L.marker(latlng,{ + if (geotype == "auto") { + iconname = "star"; // default icon + iconcolor = "orange"; + for (var i = 0; i < feature.properties.categories.length; i++) { + category = feature.properties.categories[i].toLowerCase(); + switch (category) { + case "stations": + iconname = "train"; + iconcolor = "blue"; + break; + case "shops": + iconname = "shopping-cart"; + iconcolor = "green"; + break; + case "city": + case "village": + case "town": + case "settlements": + iconname = "city"; + iconcolor = "red"; + break; + case "parks": + iconname = "tree"; + iconcolor = "green"; + break; + case "courts": + iconname = "balance-scale"; + iconcolor = "black"; + break; + case "train depots": + iconname = "wrench"; + iconcolor = "violet"; + break; + case "hotels": + iconname = "hotel"; + iconcolor = "gray"; + break; + case "beaches": + iconname = "umbrella-beach"; + iconcolor = "orange"; + break; + } + if (iconname != "star") + break; + } + } else { + iconname = geotype; + } + marker = new L.marker(latlng,{ icon: L.AwesomeMarkers.icon({ icon: iconname, markerColor: iconcolor @@ -224,6 +271,7 @@ function load_geojson(name, url, iconname, iconcolor, active=1, style={}) { direction: "center", opacity: 0.7 }).openTooltip(); + return marker; }; break; } @@ -252,17 +300,9 @@ function load_geojson(name, url, iconname, iconcolor, active=1, style={}) { load_tiles("Satellite (2020-04-09)", 'world-2020-04-09').addTo(mymap); load_tiles("Satellite (2019-05-04, wrong coords)", 'world-2019-05-04'); -//load_svg("Test", "./overlay.svg", 0); -load_geojson("Cities", "./geojson/cities.json", "city", "red"); -load_geojson("Stations", "./geojson/stations.json", "train", "blue"); -load_geojson("Shops", "./geojson/shops.json", "shopping-cart", "green"); -load_geojson("Parks", "./geojson/parks.json", "tree", "darkgreen"); -load_geojson("Libraries", "./geojson/libraries.json", "book-open", "darkblue"); -load_geojson("CW Complexes", "./geojson/cw_complexes.json", "border-all", "black"); -load_geojson("Courts", "./geojson/courts.json", "balance-scale", "black"); -load_geojson("Waterway", "./geojson/waterway.json", "water", "darkblue"); -load_geojson("Train Depots", "./geojson/depots.json", "wrench", "violet"); -load_geojson("Streets", "./geojson/streets.json", "street", "blue", 0); +load_geojson("All", "./geojson/all.json", "auto", "auto", 0); +load_geojson("Streets", "./geojson/streets.json", "street", "auto", 1, style_streets); +load_geojson("Cities", "./geojson/city_outlines.json", "outline", "auto", 1, style_outlines); L.control.scale().addTo(mymap); @@ -342,12 +382,16 @@ function polyline_get_middle_coords(coords) { var highlighted_line; var default_street_color = "#3388ff"; + function search(e) { var query = document.getElementById("search_query").value; + var real_query = true; document.getElementById('search_results').innerHTML = ""; if (true) { - if (query.length == 0) + if (query.length == 0) { + real_query = false; query = "!@#$%^&"; // Cheap workaround to (hopefully) match nothing + } results = document.createElement("ul"); for (var i = 0; i < layers._layers.length; i++) { if (!layers._layers[i].layer._layers) @@ -362,6 +406,12 @@ function search(e) { el = document.createElement("li"); el.innerHTML = "[" + layers._layers[i].name + "] " + '' + htmlEntities(item.feature.properties.name) + ""; results.appendChild(el); + item.setOpacity(1.0); // TODO: setOpacity does not disable hover and click events + } else { + if (real_query) + item.setOpacity(0.0); // TODO + else + item.setOpacity(1.0); // TODO } break; case "LineString": @@ -532,6 +582,8 @@ mymap.on('overlayadd', function (e) { update_street_width(); update_outline_visi function onHashChange(e, hash=null) { if (!hash) hash = document.location.hash; + if (hash == "") + return; if (hash == "#" + get_current_location_str()) return; // We're already there coordstr = decodeURIComponent(hash.slice(1)).split(","); -- cgit v1.2.3