31: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)) ); }); }32:[] 2f:{"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"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":291,"value":"md`\nAdditional links:\n- https://data.gov.sg/\n- https://www.onemap.sg/\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`## Map helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":283,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":280,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":38,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"L = require('leaflet@1.5.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}