Published unlisted
Edited
Apr 6, 2020
local_admin_fixed = rotate(local_admin_error, d3.geoRotation([l/10000, p/10000, g/10000]))
map = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container).setView([27.2623492,86.6466767], 17);
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
/// Additional Base Layers
let world_imagry = L.tiledMapLayer({
url: 'http://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
maxZoom: 17
});
let world_topo = L.tiledMapLayer({
url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer',
maxZoom: 17
});
let baseLayers = {
"Open Street Maps":osmLayer,
"World Imagery":world_imagry,
"World Topo Map":world_topo,
};
let overlayLayers = {
};
let c_layers = new L.control.layers(baseLayers, overlayLayers,{position:'topright',collapsed:false})
map.addLayer(osmLayer);
map.addControl(c_layers);
// Additional Layers
var district_admin_correct_local = L.geoJson(district_admin_correct, {
weight: 1,
color: "blue",
}).addTo(map);
var local_admin_error_local = L.geoJson(local_admin_error, {
weight: 1,
color: "grey",
}).addTo(map);
var local_admin_fixed_local = L.geoJson(local_admin_fixed, {
weight: 1,
color: "red",
}).addTo(map);
}
local_admin_error = FileAttachment("local-admin_projection-84-error.geojson").json()
rotate = function(input, transform) {
function fixPoint(input) {
var n = input.length, i = 2;
var output = transform(input);
while (i < n) output[i] = input[i], ++i;
return output;
}
function fixPoints(input) {
return input.map(fixPoint);
}
function fixPolygon(input) {
return input.map(fixPoints);
}
function fixGeometry(input) {
if (input == null) return input;
var output;
switch (input.type) {
case "GeometryCollection": output = {type: "GeometryCollection", geometries: input.geometries.map(fixGeometry)}; break;
case "Point": output = {type: "Point", coordinates: fixPoint(input.coordinates)}; break;
case "MultiPoint": output = {type: input.type, coordinates: fixPoints(input.coordinates)}; break;
case "LineString": output = {type: input.type, coordinates: fixPoints(input.coordinates)}; break;
case "MultiLineString": case "Polygon": output = {type: input.type, coordinates: fixPolygon(input.coordinates)}; break;
case "MultiPolygon": output = {type: "MultiPolygon", coordinates: input.coordinates.map(fixPolygon)}; break;
default: return input;
}
if (input.bbox != null) output.bbox = input.bbox;
return output;
}
function fixFeature(input) {
var output = {type: "Feature", properties: input.properties, geometry: fixGeometry(input.geometry)};
if (input.id != null) output.id = input.id;
if (input.bbox != null) output.bbox = input.bbox;
return output;
}
if (input != null) switch (input.type) {
case "Feature": return fixFeature(input);
case "FeatureCollection": {
var output = {type: "FeatureCollection", features: input.features.map(fixFeature)};
if (input.bbox != null) output.bbox = input.bbox;
return output;
}
default: return fixGeometry(input);
}
return input;
}
district_admin_correct = FileAttachment("district-admin_projection-84.geojson").json()
L = require('leaflet@1.3.0','https://unpkg.com/esri-leaflet@2.0.6')
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")
d3 = require("d3-geo@1", "d3-geo-projection@2")
import {slider} from "@jashkenas/inputs"
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.
