ol = require('openlayers@4')
html`<link href='https://unpkg.com/openlayers@4.6.5/css/ol.css' rel='stylesheet' />`
// map = {
// let map = new ol.Map({
// layers: [
// new ol.layer.Tile({
// source: new ol.source.OSM()
// })
// ],
// target: html`<div style='height:500px;'></div>`,
// view: new ol.View({
// center: ol.proj.fromLonLat([-77.41, 37.5]),
// zoom: 10
// })
// });
// setTimeout(() => map.updateSize(), 1);
// return map;
// }
map2.getTargetElement()
viewof longitude = Range([16.3, 17.5], {step: 0.001, value: 16.90, format: x => x.toFixed(2), label: "longitude"})
viewof latitude = Range([52.2, 52.6], {step: 0.001, value: 52.41, label: "latitude", format: x => x.toFixed(2)})
map2 = {
var map2 = new ol.Map({
view: new ol.View({center: ol.proj.transform([16.9278, 52.4044], 'EPSG:4326', 'EPSG:3857'), zoom: 10}),
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
target: html`<div style='height:500px;'></div>`, // had to add this to the https://bl.ocks.org/ThomasG77/5e47a21c651be974cb688e8a8f967cca
});
var marker = new ol.Feature({
type: 'blueCircle',
geometry: new ol.geom.Point(ol.proj.transform([16.9071388, 52.4901917], 'EPSG:4326', 'EPSG:3857')),
});
// I want to use some style elements. From the animation example, I need to use:
// https://openlayers.org/en/latest/examples/feature-move-animation.html
// import {
// Circle as CircleStyle,
// Fill,
// Icon,
// Stroke,
// Style,
// } from 'ol/style';
var CircleStyle = ol.style.Circle
// var Fill = ol.style.Fill;
// var Icon = ol.style.Icon;
// var Stroke = ol.style.Stroke;
// var Style = ol.style.Style
var {Fill, Icon, Stroke, Style} = ol.style;
// adding some additional features beyond the single circle.
// copying ideas from https://openlayers.org/en/latest/examples/feature-move-animation.html
var marker2 =
new ol.Feature({
type: 'geoMarkerBlackWhite',
geometry: new ol.geom.Point(ol.proj.transform([16.92, 52.4901917], 'EPSG:4326', 'EPSG:3857')),
});
var marker3 =
new ol.Feature({
type: 'icon',
geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857')),
});
var styles = {
// 'route': new Style({
// stroke: new Stroke({
// width: 6,
// color: [237, 212, 0, 0.8],
// }),
// }),
'blueCircle': new Style({
image: new CircleStyle({
radius: 7,
stroke: new Stroke({
color: 'blue',
width: 1,
}),
}),
}),
'icon': new Style({
image: new Icon({
anchor: [0.5, 1],
src: 'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-64.png',
}),
}),
'geoMarkerBlackWhite': new Style({
image: new CircleStyle({
radius: 7,
fill: new Fill({color: 'black'}),
stroke: new Stroke({
color: 'white',
width: 3,
}),
}),
}),
};
var markers = new ol.source.Vector({
features: [marker, marker2, marker3]
});
var markerVectorLayer = new ol.layer.Vector({
source: markers,
style: function (feature) {
return styles[feature.get('type')];
},
});
map2.addLayer(markerVectorLayer);
setTimeout(() => map2.updateSize(), 1);
return map2
}
import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from "@observablehq/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.
