streetMap = {
var map = new mapboxgl.Map({
container: streetMapContainer,
center: mapCenter,
zoom: 17,
style: 'mapbox://styles/mapbox/light-v9'
});
map.on('click', 'matchedStreets', (e) => {
var feature = {type:"Feature", geometry:JSON.parse(e.features[0].properties.original_geometry)};
console.log(feature);
map.getSource("streetCenterlines").setData(feature);
});
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("streetCenterlines",{
"type": "geojson",
"data": {type:"FeatureCollection", features:[]}});
map.addLayer({
"id": "streetCenterlines",
"type": "line",
"source": "streetCenterlines",
"paint": {
"line-width": scaledWidth(3),
"line-color": "black",
"line-opacity": 0.35,
"line-dasharray" : [2,1]
}
});
map.addSource("unmatchedStreetCenterlines",{
"type": "geojson",
"data": {type:"FeatureCollection", features:[]}});
map.addLayer({
"id": "unmatchedStreetCenterlines",
"type": "line",
"source": "unmatchedStreetCenterlines",
"paint": {
"line-width": scaledWidth(3),
"line-color": "orange",
"line-opacity": 0.35,
"line-dasharray" : [2,1]
}
});
map.addSource("matchedStreets",{
"type": "geojson",
"data": {type:"FeatureCollection", features:[]}});
map.addLayer({
"id": "matchedStreets",
"type": "line",
"source": "matchedStreets",
"paint": {
"line-width": scaledWidth(8),
"line-offset": scaledWidth(4),
"line-color": "blue",
"line-opacity": 0.15
}
});
map.addSource("streetClosures",{
"type": "geojson",
"data": {type:"FeatureCollection", features:[]}});
map.addLayer({
"id": "streetClosures",
"type": "line",
"source": "streetClosures",
"paint": {
"line-width": scaledWidth(3),
"line-color": "orange",
"line-opacity": 0.35,
"line-dasharray" : [2,1]
}
});
map.addSource("matchedClosures",{
"type": "geojson",
"data": {type:"FeatureCollection", features:[]}});
map.addLayer({
"id": "matchedClosures",
"type": "line",
"source": "matchedClosures",
"paint": {
"line-color": "orange",
"line-width": scaledWidth(8),
"line-offset": scaledWidth(4),
"line-opacity": 1.0
}
});
map.addSource("streetParking",{
"type": "geojson",
"data": {type:"FeatureCollection", features:[]}});
map.addLayer({
"id": "streetParking",
"type": "line",
"source": "streetParking",
"paint": {
"line-width": scaledWidth(3),
"line-color": ["get", "color"],
"line-opacity": 0.35,
"line-dasharray" : [1,1]
}
});
map.addSource("matchedParking",{
"type": "geojson",
"data": {type:"FeatureCollection", features:[]}});
map.addLayer({
"id": "matchedParkingRight",
"type": "line",
"source": "matchedParking",
"paint": {
"line-color": ["get", "color"],
"line-width": scaledWidth(8),
"line-offset": scaledWidth(12),
"line-opacity": 0.5
},
filter:["==", "side", "right"]
});
map.addLayer({
"id": "matchedParkingLeft",
"type": "line",
"source": "matchedParking",
"paint": {
"line-color": ["get", "color"],
"line-width": scaledWidth(8),
"line-offset": scaledWidth(-12),
"line-opacity": 0.5
},
filter:["==", "side", "left"]
});
// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: true
});
map.on('mouseenter', 'matchedStreets', function(e) {
console.log(e);
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
var description = "ShSt Reference ID: <b>" + e.features[0].properties.referenceId + "</b><br/>";
description += "Length: <b>" + e.features[0].properties.referenceLength + "</b><br/>";
var streetName = JSON.parse(e.features[0].properties.originalFeature).properties.ORD_STNAME;
description += "Name: <b>" + streetName + "</b><br/>";
var originalID = JSON.parse(e.features[0].properties.originalFeature).properties.SND_ID;
description += "Original objectID: <b>" + originalID + "</b><br/>";
popup.setLngLat(e.lngLat)
.setHTML(description)
.addTo(map);
});
function parkingPopupHandler(e) {
console.log(e);
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
var description = "ShSt Reference ID: <b>" + e.features[0].properties.referenceId + "</b><br/>";
var parkingReg = JSON.parse(e.features[0].properties.originalFeature).properties.SPACETYPED;
description += "Curb use: <b>" + parkingReg + "</b><br/>";
var fromLoc = JSON.parse(e.features[0].properties.section)[0].toFixed(1);
description += "Start location (m): <b>" + fromLoc + "</b><br/>";
var toLoc = JSON.parse(e.features[0].properties.section)[1].toFixed(1);
description += "End location (m): <b>" + toLoc + "</b><br/>";
popup.setLngLat(e.lngLat)
.setHTML(description)
.addTo(map);
}
map.on('mouseenter', 'matchedParkingRight', parkingPopupHandler);
map.on('mouseenter', 'matchedParkingLeft', parkingPopupHandler);
init = true;
}
};
return Generators.observe(change => {
var initialValue = {map: map,
isInit:init,
bounds:map.getBounds()};
change(initialValue);
map.on('click', (evt) => {
clickedFeatures.push(evt);
});
map.on('load', (evt) => {
initMap();
var updateValue = {map: map,
isInit:init,
bounds:map.getBounds()};
change(updateValue);
});
map.on('moveend', e => {
var updateValue = {map: map,
isInit:init,
bounds:map.getBounds()};
change(updateValue);
});
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
