2e:null 2f:["$","title",null,{"children":"Singapore Map | Raphael Odini | Observable"}] 34:T81f,map = { // Container let container = DOM.element('div', { style: `width:${width}px;height:${width / 1.5}px` }); yield container; // Map: Init let map = L.map(container).setView([1.33967, 103.85007], 11); const osmLayer = L.tileLayer( 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', { attribution: 'Wikimedia maps beta | © OpenStreetMap contributors' } ).addTo(map); // Map: Layers let singaporeRegionsLayer = L.geoJson(singaporeRegionsGeoJSON, { onEachFeature: function(feature, layer) { layer.bindPopup(`

${feature.properties['name']}

`); }, style: { color: 'grey', weight: 1 } }).addTo(map); let singaporeMRTLayer = L.geoJson(singaporeMRTGeoJSON, { pointToLayer: function(geoJsonPoint, latlng) { return L.marker(latlng, { icon: L.icon({ iconUrl: MAP_ICONS.train_station }) }); }, onEachFeature: function(feature, layer) { layer.bindPopup( `

${feature.properties['name']}

${feature.properties['lines']}

` ); }, style: function(geoJsonFeature) { return { color: geoJsonFeature.geometry.properties['color'] }; } }).addTo(map); let hawkerCentrePinLayerGroup = L.layerGroup().addTo(map); let singaporeF1Layer = L.geoJson(singaporeF1GeoJSON, { style: { color: 'black', weight: 5 } }).addTo(map); // Map: Control (top-right) let baseMaps = { Wikimedia: osmLayer }; let overlayMaps = { Regions: singaporeRegionsLayer, MRT: singaporeMRTLayer, "Hawker Centres": hawkerCentrePinLayerGroup, "F1 Grand Prix": singaporeF1Layer }; L.control.layers(baseMaps, overlayMaps, { collapsed: false }).addTo(map); // Fill Layer: hawkerCentrePinLayerGroup singaporeHawkerCentresCSV.map(location => { hawkerCentrePinLayerGroup.addLayer( L.marker([location['LATITUDE'], location['LONGITUDE']], { icon: L.icon({ iconUrl: MAP_ICONS.restaurant }) }).bindPopup(hawkerCentrePopupTemplate(location)) ); }); }35:[] 32:{"id":"1e5001561c255b0a","slug":"singapore-map","title":"Singapore Map","thumbnail":"c8eb9046b2fb99b378491d33a50c3a50bc6cec9e4685e8db38f44f1b1c015bf5","access_level":"public","create_time":"$D2019-09-20T13:37:13.958Z","update_time":"$D2019-10-04T05:45:01.781Z","view_time":null,"first_public_time":"$D2019-09-22T10:57:05.105Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0e52e5e33af91574","login":"raphodn","name":"Raphael Odini","avatar_url":"https://avatars-next.observableusercontent.com/48606a9ca37120ad16c04db363ce73771c22c697c53bd64ae06c255c143a48b2","tier":"starter_2024"},"version":294,"publish_version":294,"role":null,"authored":false,"authors":[{"type":"individual","id":"a93115718e55c049","login":"raphodn","name":"Raphael Odini","avatar_url":"https://avatars-next.observableusercontent.com/48606a9ca37120ad16c04db363ce73771c22c697c53bd64ae06c255c143a48b2","tier":null}],"members":[{"type":"individual","id":"a93115718e55c049","login":"raphodn","name":"Raphael Odini","avatar_url":"https://avatars-next.observableusercontent.com/48606a9ca37120ad16c04db363ce73771c22c697c53bd64ae06c255c143a48b2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Singapore Map","cells":[{"id":0,"value":"md`\n# Singapore Map\n\nMy own version of onemap.sg with datasets I want to visualize: both open & personal data.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"md`\nIdeas of things to draw:\n- 7-Elevens\n- bus routes\n- cycling: PCN\n- parks\n- highest points in Singapore\n- SCB Marathon\n- my top places\n- openstreetmap queries?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"md`\nAdditional links:\n- https://data.gov.sg/\n- https://www.onemap.sg/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`## Map helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"MAP_ICONS = {\n return {\n restaurant: \"https://raw.githubusercontent.com/openstreetmap/map-icons/master/square.small/food/restaurant.png\",\n train_station: \"https://raw.githubusercontent.com/openstreetmap/map-icons/master/square.small/transport/railway_station.png\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"function hawkerCentrePopupTemplate(location) {\n let hawkerCentrePopupTemplateContent = `\n

${location['Name']}

\n `;\n if (location['STATUS'] === 'Under Construction') {\n hawkerCentrePopupTemplateContent += `

${location['STATUS']}

`;\n } else {\n hawkerCentrePopupTemplateContent += `

${location['NO_OF_FOOD_STALLS']} Food Stalls

`;\n }\n hawkerCentrePopupTemplateContent += `\n

\n `;\n return hawkerCentrePopupTemplateContent;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"// GeoJson from https://github.com/cheeaun/f1sg\nsingaporeF1GeoJSON = {\n let _sgF1 = await d3.json(\"https://raw.githubusercontent.com/cheeaun/f1sg/master/f1.geojson\");\n let _sgF1Filtered = _sgF1.features.filter(f => f.geometry.type !== 'Point');\n return _sgF1Filtered;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"singaporeHawkerCentresCSV = await d3.csv(\"https://gist.githubusercontent.com/raphodn/eecc3d8f6a5a04793385f44aa8304e30/raw/61fe15113a75dbbd04539858732fad0d5df3ae1c/hawker-centres-kml.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"// GeoJson from https://github.com/yinshanyang/singapore\nsingaporeRegionsGeoJSON = await d3.json(\"https://raw.githubusercontent.com/yinshanyang/singapore/master/maps/1-region.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"singaporeMRTGeoJSON = await d3.json(\n \"https://gist.githubusercontent.com/raphodn/aca68c6e5b704d021fe0b0d8a376f4aa/raw/40d3d455da164bf8046a1fc6e51a5dc1ed2a0fa6/singapore-mrt.min.geojson\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"// polyline = require('@mapbox/polyline')\n// polyline = require('https://cdn.jsdelivr.net/npm/@mapbox/polyline@1.1.0/src/polyline.min.js')\npolyline = require('https://bundle.run/@mapbox/polyline')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"L = require('leaflet@1.5.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"