2c:null 2d:["$","title",null,{"children":"Mapbox with OSM | Alok Pepakayala | Observable"}] 32:T6e91,pin_icon = () => html`

`33:T499,_map = { var map = new mapboxgl.Map({ container: maphtml.querySelector('.container'), center: [35.97, 33.504], zoom: 10, scrollZoom: true, style: { version: 8, sources: { osm: { type: 'raster', tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"], tileSize: 256 } }, glyphs: "https://hostedglyphs/{fontstack}/{range}.pbf", layers: [ { id: 'osm', type: 'raster', source: 'osm' } ] } }); map.addControl(new mapboxgl.FullscreenControl(), 'top-left'); map.addControl(new mapboxgl.NavigationControl()); return new Promise((yes, no) => { map.on('load', f => { map.addSource("polygon", createGeoJSONCircle([0, 0], 0.5)); map.addLayer({ id: "polygon", type: "fill", source: "polygon", layout: {}, paint: { "fill-color": "#C51617", "fill-opacity": 0.25 } }); invalidation.then(() => { map.remove(); map.removeSource("polygon"); map.removeLayer("polygon"); }); yes(map); }); }); }34:[] 30:{"id":"c7bf21cdae0c01e4","slug":"mapbox-with-osm","title":"Mapbox with OSM","thumbnail":"d965a1d3cd10a0a59021fb0f27781f8d1f711e282a47a4e3ecc09d6fbbc88698","access_level":"public","create_time":"$D2021-10-09T23:15:50.290Z","update_time":"$D2021-10-14T19:57:57.777Z","view_time":null,"first_public_time":"$D2021-10-12T17:40:57.077Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/f28a7b5f4fb16a63caaace8a87a531e60bea383d6e9d50e126570c77c0814ba9","tier":"starter_2024"},"version":261,"publish_version":261,"role":null,"authored":false,"authors":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null}],"members":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mapbox with OSM","cells":[{"id":0,"value":"md`# Mapbox with OSM`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"my_location = [location.coords.longitude, location.coords.latitude]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"timestamp = location.timestamp","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"viewof location = {\n var dom = html`

`;\n\n function success(pos) {\n var crd = pos.coords;\n dom.value = pos;\n dom.dispatchEvent(new CustomEvent(\"input\"));\n dom.innerHTML = `Your current position is latitude : ${crd.latitude}, longitude: ${crd.longitude}; accuracy ${crd.accuracy} meters.`;\n }\n\n function error(err) {\n dom.value = err;\n dom.dispatchEvent(new CustomEvent(\"input\"));\n dom.innerHTML = `ERROR(${err.code}): ${err.message}`;\n }\n\n var id = navigator.geolocation.watchPosition(success, error, {\n enableHighAccuracy: true,\n timeout: 5000,\n maximumAge: 0\n });\n\n invalidation.then(() => {\n navigator.geolocation.clearWatch(id);\n });\n\n return dom;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"maphtml = html`

\n\n

\n \n

\n Map tiles by OpenStreetMap tile servers, under the tile usage policy. Data by OpenStreetMap\n

\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"viewof should_zoom = Inputs.toggle({ label: \"Auto zoom\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"set_marker = {\n var marker = new mapboxgl.Marker(\n html`

${pin_icon()}

`\n )\n .setLngLat(my_location)\n .addTo(_map);\n\n //add the circle based on accuracy\n location &&\n _map.getSource('polygon') &&\n _map\n .getSource('polygon')\n .setData(\n createGeoJSONCircle(my_location, location.coords.accuracy / 1000).data\n );\n\n invalidation.then(() => {\n marker.remove();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"zoom_marker = {\n if (should_zoom) {\n //zoom in\n\n _map.setCenter(my_location);\n location &&\n _map.fitBounds(\n turf.bbox(\n createGeoJSONCircle(my_location, location.coords.accuracy / 1000).data\n ),\n { padding: 50 }\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"createGeoJSONCircle = function(center, radiusInKm, points) {\n if (!points) points = 64;\n\n var coords = {\n latitude: center[1],\n longitude: center[0]\n };\n\n var km = radiusInKm;\n\n var ret = [];\n var distanceX = km / (111.320 * Math.cos((coords.latitude * Math.PI) / 180));\n var distanceY = km / 110.574;\n\n var theta, x, y;\n for (var i = 0; i < points; i++) {\n theta = (i / points) * (2 * Math.PI);\n x = distanceX * Math.cos(theta);\n y = distanceY * Math.sin(theta);\n\n ret.push([coords.longitude + x, coords.latitude + y]);\n }\n ret.push(ret[0]);\n\n return {\n type: \"geojson\",\n data: {\n type: \"FeatureCollection\",\n features: [\n {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [ret]\n }\n }\n ]\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"mapboxgl = {\n var mapboxgl = await require('mapbox-gl@1.9.1');\n \n const href = await require.resolve(\"mapbox-gl@2.5.1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"turf = require(\"@turf/turf\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"