streetMap = { var map = new mapboxgl.Map({ container: streetMapContainer, center: mapCenter, zoom: 15, style: 'mapbox://styles/mapbox/light-v9' }); var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); map.on('mouseenter', 'shstData', function(e) { console.log(e); // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var description = "ShSt Geometry Id: " + e.features[0].properties.id + "
"; description += "Road Class: " + e.features[0].properties.roadClass + "
"; var forwardRef = JSON.parse(e.features[0].properties.forwardReference); description += "Forward RefId: " + forwardRef.id + "
"; if(e.features[0].properties.backReference != "null") { var backRef = JSON.parse(e.features[0].properties.backReference); description += "Back RefId: " + backRef.id + "
"; } var fromIntersection = JSON.parse(e.features[0].properties.fromIntersection); var toIntersection = JSON.parse(e.features[0].properties.toIntersection); var metadata = JSON.parse(e.features[0].properties.metadata); description += "From OSM node: " + fromIntersection.nodeId; description += " to node: " + toIntersection.nodeId + "
"; var wayIds = []; for(var way of metadata.waySections) { wayIds.push(way.wayId); } description += "OSM ways: " + wayIds.join(",") + "
"; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. // while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { // coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; // } // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(e.lngLat) .setHTML(description) .addTo(map); }); map.on('click', function() { map.getCanvas().style.cursor = ''; popup.remove(); }); var init = false; var scaledWidth = (width) => {return { "type": "exponential", "base": 2, "stops": [ [10, width * Math.pow(2, (10 - 16))], [16, width * Math.pow(2, (16 - 16))] ] }}; var initMap = () => { if(!init) { map.addSource("shstData",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "shstData", "type": "line", "source": "shstData", "paint": { "line-color": [ 'match', ['get', 'roadClass'], 'Motorway', '#fbb03b', 'Trunk', '#e55e5e', 'Primary', '#e55e5e', 'Secondary', '#3bb2d0', 'Tertiary', '#3bb2d0', 'Residential', '#3bf2d0', 'Unclassified', '#3bb2f0', 'Service', '#fbb2d0', /* other */ '#ccc' ], "line-width": scaledWidth(4), "line-dasharray": [1.0, 0.5] } }); // map.addLayer({ // "id": "shstDataCompare", // "type": "line", // "source": "shstData", // "paint": { // "line-color": [ // 'match', // ['get', 'matchType'], // 'unchanged', '#ccc', // 'matched_ref_changed', 'green', // 'matched_geom_changed', 'orange', // 'matched_candidates', 'blue', // 'unmatched', 'red', // /* other */ 'teal' // ], // "line-width": scaledWidth(4), // "line-dasharray": [1.0, 0.5] // } // }); // Create a popup, but don't add it to the map yet. var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); init = true; } }; return Generators.observe(change => { var initialValue = {map: map, isInit:init, bounds:undefined}; change(initialValue); map.on('load', (evt) => { initMap(); var updateValue = {map: map, isInit:init, bounds:undefined}; change(updateValue); }); map.on('boxzoomend', e => { var updateValue = {map: map, isInit:init, bounds:e.boxZoomBounds}; change(updateValue); }); }); }