30:T6e91,pin_icon = () => html`

`31: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); }); }); }32:[] 2e:{"title":"Mapbox with OSM","cells":[{"id":0,"value":"md`# Mapbox with OSM`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"my_location = [location.coords.longitude, location.coords.latitude]","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"timestamp = location.timestamp","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":208,"value":"viewof should_zoom = Inputs.toggle({ label: \"Auto zoom\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":153,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":114,"value":"turf = require(\"@turf/turf\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}