Social development practitioner. Trying to understand our world.
L = require('leaflet@1.2.0')
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
$ = require("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js")
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([51.4976593, -0.1339468], 11);
let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', {
attribution: 'Wikimedia maps beta | © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Options
var showLabels = true;
var scope = 'world'
var geoData = scope === 'world' ? "https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson" : "https://raw.githubusercontent.com/phylogeography/SpreaD3/master/data/continuous/Nuno/portugal.geojson" // require(<url>{scope}.json)
//https://github.com/phylogeography/SpreaD3/tree/master/data/geoJSON_maps
//Can be deleted since we don't use jQuery
$.getJSON(geoData,function(data){
L.geoJson(data).addTo(map); //geoJson(geoData)
});
if(showLabels) { //Add label files, CHANGE ZINDEX FOR LABELS , change light_all for light, add labels in next z index
console.log('triggrd')
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);
}
L.circle([51.508, -0.11], { //Bubbles and whatnot
color: 'red',
fillColor: '#f03',
fillOpacity: 0.2,
radius: 5000
}).addTo(map);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
