diff --git a/htdocs/mapscript.js b/htdocs/mapscript.js index c8959ab..8685209 100644 --- a/htdocs/mapscript.js +++ b/htdocs/mapscript.js @@ -1,3 +1,19 @@ +var streetLabelsRenderer = new L.StreetLabels({ + collisionFlg: true, + propertyName: 'name', + showLabelIf: function (layer) { + return layer.geometry.type == "LineString"; + }, + fontStyle: { + dynamicFontSize: false, + fontSize: 10, + fontSizeUnit: "px", + lineWidth: 4.0, + fillStyle: "black", + strokeStyle: "white", + }, +}); + // Projection fix from: https://gis.stackexchange.com/questions/200865/leaflet-crs-simple-custom-scale var factorx = 1 / 256 * 4; var factory = factorx; @@ -28,6 +44,7 @@ L.CRS.pr = L.extend({}, L.CRS.Simple, { // Init map var mymap = L.map('mapid', { + renderer: streetLabelsRenderer, crs: L.CRS.pr }).setView([0, 0], 6); @@ -82,34 +99,45 @@ function load_tiles(name, id) { return satellite; } -function load_geojson(name, url, iconname, iconcolor, active=1) { +function load_geojson(name, url, iconname, iconcolor, active=1, style={}) { var xhttp_ps = new XMLHttpRequest(); xhttp_ps.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { + switch (iconname) { + case "street": + onEachFeature = null; + pointToLayer = null; + break; + default: /* else it is a marker with the specified icon */ + onEachFeature = function(feature, layer) { + label = String(feature.properties.name) + layer.bindPopup('

' + feature.properties.name + ' (' + feature.geometry.coordinates + ')

' + '

' + '

' + feature.properties.description + '

'); + layer.bindTooltip(label, { + permanent: true, + direction: "center", + className: "city-names" + }).openTooltip(); + }; + pointToLayer = function(feature, latlng) { + label = String(feature.properties.name) + return new L.marker(latlng,{ + icon: L.AwesomeMarkers.icon({ + icon: iconname, + markerColor: iconcolor + }) + }).bindTooltip(label, { + permanent: false, + direction: "center", + opacity: 0.7 + }).openTooltip(); + }; + break; + } var geojson = L.geoJSON(JSON.parse(xhttp_ps.responseText), { - onEachFeature: function(feature, layer) { - label = String(feature.properties.name) - layer.bindPopup('

' + feature.properties.name + ' (' + feature.geometry.coordinates + ')

' + '

' + '

' + feature.properties.description + '

'); - layer.bindTooltip(label, { - permanent: true, - direction: "center", - className: "city-names" - }).openTooltip(); - }, - pointToLayer: function(feature, latlng) { - label = String(feature.properties.name) - return new L.marker(latlng,{ - icon: L.AwesomeMarkers.icon({ - icon: iconname, - markerColor: iconcolor - }) - }).bindTooltip(label, { - permanent: false, - direction: "center", - opacity: 0.7 - }).openTooltip(); - } + style: style, + onEachFeature: onEachFeature, + pointToLayer: pointToLayer }); layers.addOverlay(geojson, name); if (active)