31:T5f1,map = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell, so it's // completely self-contained. let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); // Note that I'm yielding the container pretty early here: this allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight to size the map. If I were // to only return the container at the end of this method, Leaflet might // get the wrong idea about the map's size. yield container; // Now we create a map object and add a layer to it. let map = L.map(container).setView([0,0], 2); let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', { attribution: 'Wikimedia maps beta | © OpenStreetMap contributors' }).addTo(map); // Now adding a simple, default marker at null island var meridian = 260; for(var i=0;i`; // Like Leaflet and Mapbox GL JS, Google Maps is very picky about // needing to be initialized on a div that's already included // in the page. So I yield the div first, to establish it in // the page. yield div; let map = this const data = JSON.parse(JSON.stringify(mapBoxData)) map = new mapboxgl.Map({ container: div, center:[16.5, 44], zoom: 1, style: 'mapbox://styles/mapbox/dark-v9', scrollZoom: true // helpful to disable this when embedding maps within scrollable webpages }); map.addControl(new mapboxgl.NavigationControl()); map.on("load", function () { // add the source to the map styles map.addSource('crashes', { type: 'geojson', 'data': data, }); // add the map layer map.addLayer({ id: 'crashes', type: 'circle', source: 'crashes', 'layout': {}, 'paint': { 'circle-color': 'blue', 'circle-opacity': 0.8, 'circle-radius': 5, } }); }) // Wait until the map loads, then yield the container again. yield new Promise(resolve => { resolve(div); }); }34:[] 2f:{"title":"Maps stress test","cells":[{"id":0,"value":"md`# Maps stress test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`## 1. Leaflet`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`${leafletPoints} point`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"viewof leafletPoints = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"leadletCss = html`\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`## 2. Google Maps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"md`${googlePoints} point`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"viewof googlePoints = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"googleMap = {\n let div = html`

`;\n // Like Leaflet and Mapbox GL JS, Google Maps is very picky about\n // needing to be initialized on a div that's already included\n // in the page. So I yield the div first, to establish it in\n // the page.\n yield div;\n let map = new google.maps.Map(div, {\n center: {lng:0, lat:0},\n zoom: 2,\n styles :googleCssArray\n });\n \n var meridian = 360;\n \n \n\n \n for(var i=0;i window.google)","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`## 3. Raw SVG Map `","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`${d3Points} point`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"viewof d3Points = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"\nrawSvgMap = {\n var height = width/1.6\n \n var projection = d3.geoMercator()\n .scale(149)\n .translate([width * 0.56, height * 0.33])\n .center([43.5, 44]);\n \n var path = d3.geoPath()\n .projection(projection);\n \n return svg`\n\n \n` \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"rawGeojson = d3.json('https://raw.githubusercontent.com/bumbeishvili/d3js-boilerplates/gh-pages/Maps/World/data/world_countries.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"zoomBehavior = {\n rawSvgMap;\n var svg = d3.select('#rawSvgMap');\n var zoom = d3.zoom().on(\"zoom\", d =>{\n var transform = d3.event.transform;\n svg.select('g').attr('transform', transform);\n });\n svg.call(zoom)\n \n return 'zoom behavior body'\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"md`# 4. Mapbox GL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"md`${mapboxGlPoints} point`","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"viewof mapboxGlPoints = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":" \nmapBoxData = {\n var featureCollection = {\n type: \"FeatureCollection\",\n features:[]\n }\n \n var diff = 240;\n \n featureCollection.features = d3.range(mapboxGlPoints).map(d=>{\n return {\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates:[ Math.round(Math.random()*diff-diff/2),(Math.round(Math.random()*diff)-diff/2)/2+20]\n }\n }\n })\n return featureCollection;\n \n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.43.0');\n mapboxgl.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiIzOTJmMjBiZmI2NGQ2ZjAzODhiMzhiOGI2MTI1YTk4YSJ9.sIOXXU3TPp5dLg_L3cUxhQ';\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"mapboxglCSS = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}