Public
Edited
May 23
1 star
Insert cell
Insert cell
Insert cell
Insert cell
{
await visibility();
const container = html`<div style="height:600px;">`;
yield container;

const map = L.map(container).setView([-7.8, 110.379], 13);

// basemap(s)
let osmLayer = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}
).addTo(map);

// Overlay, WMS layer
let rdtr = L.tileLayer
.wms("http://geoportal.jogjakota.go.id/geoserver/wms", {
layers: "Dispertaru:pola_ruang_rdtr_347120191106092011",
format: "image/png",
transparent: "true"
})
.addTo(map);

// Controls
var baseMaps = {
OpenStreetMap: osmLayer
};

var overlayMaps = {
RDTR: rdtr
};

var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
}
Insert cell
Insert cell
// from https://observablehq.com/@tmcw/leaflet

heatLayer = require("leaflet.heat").catch(() => L.heatLayer)
Insert cell
L
Insert cell
Insert cell
twitter_data = raw_data.map((d) => [d.Y, d.X])
Insert cell
Insert cell
{
await visibility();
const container = html`<div style="height:600px;">`;
yield container;

const map = L.map(container, {
renderer: L.canvas()
}).setView([-7.8, 110.379], 11);

// basemap(s)
let osmLayer = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution:
'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}
).addTo(map);

let geojsonlayer = L.geoJson(raw_data);
geojsonlayer.addTo(map);

let heatlayer = heatLayer(twitter_data, {
radius: heat_radius
}).addTo(map);

invalidation.then(() => {
heatLayer.redraw().remove();
map.remove();
});

// map.fitBounds(VanAreasLayer.getBounds());
}
Insert cell
Insert cell
Insert cell
kitten = {
L.TileLayer.Kitten = L.TileLayer.extend({
getTileUrl: function (coords) {
var i = Math.ceil(Math.random() * 4);
return "https://placekitten.com/256/256?image=" + i;
},
getAttribution: function () {
return "<a href='https://placekitten.com/attribution.html'>PlaceKitten</a>";
}
});
return new L.TileLayer.Kitten();
}
Insert cell
Insert cell
{
await visibility();
const container = html`<div style="height:600px;">`;
yield container;

const map = L.map(container).setView([-7.8, 110.379], 10);

// basemap(s)
var CartoDB_Positron = L.tileLayer(
"https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png",
{
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: "abcd",
maxZoom: 20
}
).addTo(map);

canvasLayer.addTo(map);
}
Insert cell
canvasLayer = {
// console.log("sdsf");
const MyCanvasLayer = L.CanvasLayer.extend({
onDrawLayer: function (info) {
var ctx = info.canvas.getContext("2d");
console.log(d);
ctx.clearRect(0, 0, info.canvas.width, info.canvas.height);
ctx.fillStyle = "rgba(255,0,0, 0.2)";
for (var i = 0; i < twitter_data.length; i++) {
var d = twitter_data[i];
if (info.bounds.contains([d[0], d[1]])) {
var dot = info.layer._map.latLngToContainerPoint([d[0], d[1]]);
console.log(info.layer._map);
ctx.beginPath();
ctx.arc(dot.x, dot.y, 10, 0, Math.PI * 8);
ctx.fill();
ctx.closePath();
}
}
// ctx.fillStyle = "rgba(255,116,0, 0.8)";
// ctx.beginPath();
// ctx.arc(100, 100, 10, 0, Math.PI * 2);
// ctx.fill();
// ctx.closePath();
}
});

return new MyCanvasLayer();
}
Insert cell
canvaslayerconst = {
L.CanvasLayer = (L.Layer ? L.Layer : L.Class).extend({
// -- initialized is called on prototype
initialize: function (options) {
this._map = null;
this._canvas = null;
this._frame = null;
this._delegate = null;
L.setOptions(this, options);
},

delegate: function (del) {
this._delegate = del;
return this;
},

needRedraw: function () {
if (!this._frame) {
this._frame = L.Util.requestAnimFrame(this.drawLayer, this);
}
return this;
},

//-------------------------------------------------------------
_onLayerDidResize: function (resizeEvent) {
this._canvas.width = resizeEvent.newSize.x;
this._canvas.height = resizeEvent.newSize.y;
},
//-------------------------------------------------------------
_updatePosition: function () {
var topLeft = this._map.containerPointToLayerPoint([0, 0]);
L.DomUtil.setPosition(this._canvas, topLeft);
},
_onLayerDidMove: function () {
this._updatePosition();
this.drawLayer();
},
//-------------------------------------------------------------
getEvents: function () {
var events = {
resize: this._onLayerDidResize,
moveend: this._onLayerDidMove,
zoom: this._onLayerDidMove
};
if (this._map.options.zoomAnimation && L.Browser.any3d) {
events.zoomanim = this._animateZoom;
}

return events;
},
//-------------------------------------------------------------
onAdd: function (map) {
this._map = map;
this._canvas = L.DomUtil.create("canvas", "leaflet-layer");
this.tiles = {};

var size = this._map.getSize();
this._canvas.width = size.x;
this._canvas.height = size.y;

var animated = this._map.options.zoomAnimation && L.Browser.any3d;
L.DomUtil.addClass(
this._canvas,
"leaflet-zoom-" + (animated ? "animated" : "hide")
);

map._panes.overlayPane.appendChild(this._canvas);

map.on(this.getEvents(), this);

var del = this._delegate || this;
del.onLayerDidMount && del.onLayerDidMount(); // -- callback\
this._updatePosition();
this.needRedraw();
},

//-------------------------------------------------------------
onRemove: function (map) {
var del = this._delegate || this;
del.onLayerWillUnmount && del.onLayerWillUnmount(); // -- callback

if (this._frame) {
L.Util.cancelAnimFrame(this._frame);
}

map.getPanes().overlayPane.removeChild(this._canvas);

map.off(this.getEvents(), this);

this._canvas = null;
},

//------------------------------------------------------------
addTo: function (map) {
map.addLayer(this);
return this;
},
// --------------------------------------------------------------------------------
LatLonToMercator: function (latlon) {
return {
x: (latlon.lng * 6378137 * Math.PI) / 180,
y: Math.log(Math.tan(((90 + latlon.lat) * Math.PI) / 360)) * 6378137
};
},

//------------------------------------------------------------------------------
drawLayer: function () {
// -- todo make the viewInfo properties flat objects.
var size = this._map.getSize();
var bounds = this._map.getBounds();
var zoom = this._map.getZoom();

var center = this.LatLonToMercator(this._map.getCenter());
var corner = this.LatLonToMercator(
this._map.containerPointToLatLng(this._map.getSize())
);

var del = this._delegate || this;
del.onDrawLayer &&
del.onDrawLayer({
layer: this,
canvas: this._canvas,
bounds: bounds,
size: size,
zoom: zoom,
center: center,
corner: corner
});
this._frame = null;
},
// -- L.DomUtil.setTransform from leaflet 1.0.0 to work on 0.0.7
//------------------------------------------------------------------------------
_setTransform: function (el, offset, scale) {
var pos = offset || new L.Point(0, 0);

el.style[L.DomUtil.TRANSFORM] =
(L.Browser.ie3d
? "translate(" + pos.x + "px," + pos.y + "px)"
: "translate3d(" + pos.x + "px," + pos.y + "px,0)") +
(scale ? " scale(" + scale + ")" : "");
},

//------------------------------------------------------------------------------
_animateZoom: function (e) {
var scale = this._map.getZoomScale(e.zoom);
// -- different calc of animation zoom in leaflet 1.0.3 thanks @peterkarabinovic, @jduggan1
var offset = L.Layer
? this._map._latLngBoundsToNewLayerBounds(
this._map.getBounds(),
e.zoom,
e.center
).min
: this._map
._getCenterOffset(e.center)
._multiplyBy(-scale)
.subtract(this._map._getMapPanePos());

L.DomUtil.setTransform(this._canvas, offset, scale);
}
});

return new L.CanvasLayer();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// leaflet_map = {
// // await visibility();
// const container = html`<div style="height:600px;">`;
// yield container;

// const tile = "Carto Positron Light";
// const attrib = "score";

// const map = L.map(container).setView([-7.8, 110.379], 13);
// tileProviders(tile).addTo(map);

// // Highlight on hover
// function highlightFeature(feature) {
// var feature_targeted = feature.target;
// feature_targeted.setStyle({
// color: "#fc0000"
// });

// if (!L.Browser.ie && !L.Browser.opera) {
// feature_targeted.bringToFront(feature.target);
// }
// info.update(feature_targeted.feature.properties);
// }
// function resetHighlight(e) {
// geolayer.resetStyle(e.target);
// info.update();
// }

// // info on hover
// var info = L.control();
// info.onAdd = function (map) {
// this._div = L.DomUtil.create("div", "info");
// this.update();
// return this._div;
// };
// info.update = function (props) {
// this._div.innerHTML =
// "<b>" +
// "Cambridge" +
// "</b><br />" +
// (props ? props[attrib] : "Hover over a feature");
// };
// info.addTo(map);

// // Style function
// const style = (feature, layer) => {
// return {
// fillColor: colourMap(feature.properties[attrib], false),
// weight: 0.5,
// fillOpacity: 0.9,
// color: "#fff"
// };
// };

// function onEachFeature(feature, layer) {
// layer.on({
// mouseover: highlightFeature,
// mouseout: resetHighlight
// });
// }

// var geolayer = L.geoJson(lsoa_scores, {
// onEachFeature: onEachFeature,
// style: style
// }).addTo(map);

// // Map utilities
// map.fitBounds(geolayer.getBounds());

// layerGroup.addTo(map);
// }
Insert cell
// {
// layerGroup.clearLayers();
// // Highlight on hover
// function highlightFeature(feature) {
// var feature_targeted = feature.target;
// feature_targeted.setStyle({
// color: "#fc0000"
// });

// if (!L.Browser.ie && !L.Browser.opera) {
// feature_targeted.bringToFront(feature.target);
// }
// info.update(feature_targeted.feature.properties);
// }
// function resetHighlight(e) {
// geolayer.resetStyle(e.target);
// info.update();
// }

// // info on hover
// var info = L.control();
// info.onAdd = function (map) {
// this._div = L.DomUtil.create("div", "info");
// this.update();
// return this._div;
// };
// info.update = function (props) {
// this._div.innerHTML =
// "<b>" +
// "Cambridge" +
// "</b><br />" +
// (props ? props[attrib] : "Hover over a feature");
// };
// info.addTo(map);

// // Style function
// const style = (feature, layer) => {
// return {
// fillColor: colourMap(feature.properties[attrib], false),
// weight: 0.5,
// fillOpacity: 0.9,
// color: "#fff"
// };
// };

// function onEachFeature(feature, layer) {
// layer.on({
// mouseover: highlightFeature,
// mouseout: resetHighlight
// });
// }
// var geolayer = L.geoJson(lsoa_scores, {
// onEachFeature: onEachFeature,
// style: style
// }).addTo(map);

// return layerGroup.addLayer(marker);
// }
Insert cell
Insert cell
Insert cell
map2 = {
proj;
const container = html`<div style="height:800px;">`;
yield container;

const pixel_ratio = parseInt(window.devicePixelRatio) || 1;
const max_zoom = 20;
const tile_size = 512;

const extent = 12367396.2185; // To the Equator
const resolutions = Array(max_zoom + 1)
.fill()
.map((_, i) => extent / tile_size / Math.pow(2, i - 1));

//sopurce :https://tile.gbif.org/ui/3031/leaflet.html
const crs = new L.Proj.CRS(
"EPSG:3031",
"+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs",
{
origin: [-extent, extent],
projectedBounds: L.bounds(
L.point(-extent, extent),
L.point(extent, -extent)
),
resolutions: resolutions
}
);

const antarcticaMap = L.map(container, {
crs: crs
}).setView([-90, -65], 3);

L.tileLayer(
"https://tile.gbif.org/3031/omt/{z}/{x}/{y}@{r}x.png?style=gbif-geyser".replace(
"{r}",
pixel_ratio
),
{
tileSize: 512
}
).addTo(antarcticaMap);
}
Insert cell
{
const container = html`<div style="height:600px;">`;
yield container;

// Initialize the Leaflet map
const map = L.map(container).setView([51.5074, -0.1276], 5);

// Add a tile layer (using OSM tiles)
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors"
}).addTo(map);

// Create a custom canvas element for the marker
const customMarker = document.createElement("canvas");
customMarker.width = 50;
customMarker.height = 50;

// Function to draw a star and a circle on the canvas
function drawCustomMarker(canvas) {
const ctx = canvas.getContext("2d");
const size = canvas.width;
const cx = size / 2;
const cy = size / 2;
const spikes = 5;
const outerRadius = 20;
const innerRadius = 10;

// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw a star
ctx.beginPath();
for (let i = 0; i < spikes; i++) {
const outerX =
cx + Math.cos((i * 2 * Math.PI) / spikes - Math.PI / 2) * outerRadius;
const outerY =
cy + Math.sin((i * 2 * Math.PI) / spikes - Math.PI / 2) * outerRadius;
ctx.lineTo(outerX, outerY);
const innerX =
cx +
Math.cos(((i + 0.5) * 2 * Math.PI) / spikes - Math.PI / 2) *
innerRadius;
const innerY =
cy +
Math.sin(((i + 0.5) * 2 * Math.PI) / spikes - Math.PI / 2) *
innerRadius;
ctx.lineTo(innerX, innerY);
}
ctx.closePath();
ctx.fillStyle = "blue";
ctx.fill();

// Draw a circle inside the star
ctx.beginPath();
ctx.arc(cx, cy, 4, 0, 2 * Math.PI);
ctx.fillStyle = "pink";
ctx.fill();
}

// Draw the custom marker
drawCustomMarker(customMarker);

// Create a custom icon using the canvas
const customIcon = L.divIcon({
className: "",
html: customMarker.outerHTML,
iconSize: [50, 50]
});

// Add the custom marker to the map
L.marker([51.5074, -0.1276], { icon: customIcon }).addTo(map);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more