30:T612,map = { globeMiniMapDefinition; leafletSyncDefinition; const containers = [0, 1].map(_ => { return DOM.element('div', { style: `width: 50%` }); }); yield html`

${containers}

`; const maps = containers.map(container => { const map = L.map(container, { attributionControl: false, zoomControl: false }); L.control .attribution({ prefix: false }) .addTo(map); L.tileLayer( 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap, © CARTO', subdomains: 'abcd', maxZoom: 20, minZoom: 0 } ).addTo(map); return map; }); L.marker(newZealand).addTo(maps[0]); maps[0].setView(newZealand, 5); L.marker(spain).addTo(maps[1]); maps.forEach((map, i) => { L.control .globeMiniMap({ land: '#fff', water: '#aaa', topojsonSrc: resolve("world-atlas@2/countries-110m.json") }) .addTo(map); map.sync(maps[1 - i], { syncCursor: true, offsetFn: center => { return { lat: -center.lat, lng: center.lng + (2 * i - 1) * 180 }; } }); }); }31:T11a8,/* * Adapted from https://github.com/chriswhong/leaflet-globeminimap * Copyright (c) 2012, Norkart AS * BSD 2-Clause License: https://github.com/chriswhong/leaflet-globeminimap/blob/master/LICENSE.txt */ globeMiniMapDefinition = { let counter = 0; L.Control.GlobeMiniMap = L.Control.extend({ options: { position: 'bottomright', width: 82, height: 82, land: "#bbb", water: "rgba(0, 0, 0, 0.3)", marker: "#CC0000" }, //layer is the map layer to be shown in the minimap initialize: function(options) { L.Util.setOptions(this, options); this.options.id = counter++; }, onAdd: function(map) { this._mainMap = map; //Creating the container and stopping events from spilling through to the main map. this._container = L.DomUtil.create('div', 'leaflet-control-minimap'); this._container.style.width = this.options.width + 'px'; this._container.style.height = this.options.height + 'px'; L.DomEvent.disableClickPropagation(this._container); L.DomEvent.on(this._container, 'mousewheel', L.DomEvent.stopPropagation); //Keep a record of this to prevent auto toggling when the user explicitly doesn't want it. this._userToggledDisplay = false; this._minimized = false; this._mainMap.on('moveend', this._onMainMapMoved, this); return this._container; }, addTo: function(map) { L.Control.prototype.addTo.call(this, map); this.initCanvas(); return this; }, initCanvas: function() { //marker icon //https://upload.wikimedia.org/wikipedia/commons/9/93/Map_marker_font_awesome.svg d3.select(this._container) .append('svg') .attr("width", 82) .attr("height", 82) .attr("style", "position: absolute; left: 0; top: 0;") .append('path') .attr( 'd', 'm 768,896 q 0,106 -75,181 -75,75 -181,75 -106,0 -181,-75 -75,-75 -75,-181 0,-106 75,-181 75,-75 181,-75 106,0 181,75 75,75 75,181 z m 256,0 q 0,-109 -33,-179 L 627,-57 q -16,-33 -47.5,-52 -31.5,-19 -67.5,-19 -36,0 -67.5,19 Q 413,-90 398,-57 L 33,717 Q 0,787 0,896 q 0,212 150,362 150,150 362,150 212,0 362,-150 150,-150 150,-362 z' ) .attr('transform', 'scale(.01,-.01),translate(3600,-3900)') .attr('style', 'fill:' + this.options.marker); this.projection = d3.geo .orthographic() .scale(40) .translate([41, 41]) .rotate([0, 0]) .clipAngle(90); var canvas = d3 .select(this._container) .append("canvas") .attr("width", 82) .attr("height", 82); this.c = canvas.node().getContext("2d"); this.path = d3.geo .path() .projection(this.projection) .context(this.c); this.globe = { type: "Sphere" }; this.land = topojson.feature(world, world.objects.land); //set to current view this.transitionMap(this._mainMap.getCenter()); }, transitionMap: function(p) { var that = this; var c = that.c; var path = that.path; d3.transition("rotate-minimap-" + this.options.id) .duration(1250) .each("start", function() {}) .tween("rotate", function() { var r = d3.interpolate(that.projection.rotate(), [-p.lng, -p.lat]); return function(t) { that.projection.rotate(r(t)); c.clearRect(0, 0, that.options.width, that.options.height); (c.fillStyle = that.options.water), c.beginPath(), path(that.globe), c.fill(); (c.fillStyle = that.options.land), c.beginPath(), path(that.land), c.fill(); }; }); }, onRemove: function(map) { this._mainMap.off('moveend', this._onMainMapMoved, this); this._mainMap.off('move', this._onMainMapMoving, this); }, _onMainMapMoved: function(e) { if (!this._miniMapMoving) { this._mainMapMoving = true; this.transitionMap(this._mainMap.getCenter()); } else { this._miniMapMoving = false; } } }); L.control.globeMiniMap = function(layer, options) { return new L.Control.GlobeMiniMap(layer, options); }; L.Map.mergeOptions({ miniMapControl: false }); L.Map.addInitHook(function() { if (this.options.miniMapControl) { this.miniMapControl = new L.Control.GlobeMiniMap().addTo(this); } }); }32:T268c,/* * Adapted from https://github.com/jieter/Leaflet.Sync * Copyright (c) 2013-2017 Bjorn Sandvik / Jan Pieter Waagmeester * BSD 3-Clause License: https://github.com/jieter/Leaflet.Sync/blob/master/LICENSE */ leafletSyncDefinition = { /* * Extends L.Map to synchronize the interaction on one map to one or more other maps. */ (function() { var NO_ANIMATION = { animate: false, reset: true, disableViewprereset: true }; L.Sync = function() {}; /* * Helper function to compute the offset easily. * * The arguments are relative positions with respect to reference and target maps of * the point to sync. If you provide ratioRef=[0, 1], ratioTarget=[1, 0] will sync the * bottom left corner of the reference map with the top right corner of the target map. * The values can be less than 0 or greater than 1. It will sync points out of the map. */ L.Sync.offsetHelper = function(ratioRef, ratioTarget) { var or = L.Util.isArray(ratioRef) ? ratioRef : [0.5, 0.5]; var ot = L.Util.isArray(ratioTarget) ? ratioTarget : [0.5, 0.5]; return function(center, zoom, refMap, targetMap) { var rs = refMap.getSize(); var ts = targetMap.getSize(); var pt = refMap .project(center, zoom) .subtract([(0.5 - or[0]) * rs.x, (0.5 - or[1]) * rs.y]) .add([(0.5 - ot[0]) * ts.x, (0.5 - ot[1]) * ts.y]); return refMap.unproject(pt, zoom); }; }; L.Map.include({ sync: function(map, options) { this._initSync(); options = L.extend( { noInitialSync: false, syncCursor: false, syncCursorMarkerOptions: { radius: 10, fillOpacity: 0.3, color: '#da291c', fillColor: '#fff' }, offsetFn: function(center, zoom, refMap, targetMap) { // no transformation at all return center; } }, options ); // prevent double-syncing the map: if (this._syncMaps.indexOf(map) === -1) { this._syncMaps.push(map); this._syncOffsetFns[L.Util.stamp(map)] = options.offsetFn; } if (!options.noInitialSync) { map.setView( options.offsetFn(this.getCenter(), this.getZoom(), this, map), this.getZoom(), NO_ANIMATION ); } if (options.syncCursor) { if (typeof map.cursor === 'undefined') { map.cursor = L.circleMarker( [0, 0], options.syncCursorMarkerOptions ).addTo(map); } this._cursors.push(map.cursor); this.on('mousemove', this._cursorSyncMove(options), this); this.on('mouseout', this._cursorSyncOut, this); } // on these events, we should reset the view on every synced map // dragstart is due to inertia this.on('resize zoomend', this._selfSetView); this.on('moveend', this._syncOnMoveend); this.on('dragend', this._syncOnDragend); return this; }, // unsync maps from each other unsync: function(map) { var self = this; if (this._cursors) { this._cursors.forEach(function(cursor, indx, _cursors) { if (cursor === map.cursor) { _cursors.splice(indx, 1); } }); } // TODO: hide cursor in stead of moving to 0, 0 if (map.cursor) { map.cursor.setLatLng([0, 0]); } if (this._syncMaps) { this._syncMaps.forEach(function(synced, id) { if (map === synced) { delete self._syncOffsetFns[L.Util.stamp(map)]; self._syncMaps.splice(id, 1); } }); } if (!this._syncMaps || this._syncMaps.length == 0) { // no more synced maps, so these events are not needed. this.off('resize zoomend', this._selfSetView); this.off('moveend', this._syncOnMoveend); this.off('dragend', this._syncOnDragend); } return this; }, // Checks if the map is synced with anything or a specifyc map isSynced: function(otherMap) { var has = this.hasOwnProperty('_syncMaps') && Object.keys(this._syncMaps).length > 0; if (has && otherMap) { // Look for this specific map has = false; this._syncMaps.forEach(function(synced) { if (otherMap == synced) { has = true; } }); } return has; }, // Callbacks for events... _cursorSyncMove: options => function(e) { this._cursors.forEach(cursor => { cursor.setLatLng(options.offsetFn(e.latlng)); // cursor.setLatLng(e.latlng); }); }, _cursorSyncOut: function(e) { this._cursors.forEach(function(cursor) { // TODO: hide cursor in stead of moving to 0, 0 cursor.setLatLng([1000, 0]); }); }, _selfSetView: function(e) { // reset the map, and let setView synchronize the others. this.setView(this.getCenter(), this.getZoom(), NO_ANIMATION); }, _syncOnMoveend: function(e) { if (this._syncDragend) { // This is 'the moveend' after the dragend. // Without inertia, it will be right after, // but when inertia is on, we need this to detect that. this._syncDragend = false; // before calling setView! this._selfSetView(e); this._syncMaps.forEach(function(toSync) { toSync.fire('moveend'); }); } }, _syncOnDragend: function(e) { // It is ugly to have state, but we need it in case of inertia. this._syncDragend = true; }, // overload methods on originalMap to replay interactions on _syncMaps; _initSync: function() { if (this._syncMaps) { return; } var originalMap = this; this._syncMaps = []; this._cursors = []; this._syncOffsetFns = {}; L.extend(originalMap, { setView: function(center, zoom, options, sync) { // Use this sandwich to disable and enable viewprereset // around setView call function sandwich(obj, fn) { var viewpreresets = []; var doit = options && options.disableViewprereset && obj && obj._events; if (doit) { // The event viewpreresets does an invalidateAll, // that reloads all the tiles. // That causes an annoying flicker. viewpreresets = obj._events.viewprereset; obj._events.viewprereset = []; } var ret = fn(obj); if (doit) { // restore viewpreresets event to its previous values obj._events.viewprereset = viewpreresets; } return ret; } // Looks better if the other maps 'follow' the active one, // so call this before _syncMaps var ret = sandwich(this, function(obj) { return L.Map.prototype.setView.call(obj, center, zoom, options); }); if (!sync) { originalMap._syncMaps.forEach(function(toSync) { sandwich(toSync, function(obj) { return toSync.setView( originalMap._syncOffsetFns[L.Util.stamp(toSync)]( center, zoom, originalMap, toSync ), zoom, options, true ); }); }); } return ret; }, panBy: function(offset, options, sync) { if (!sync) { originalMap._syncMaps.forEach(function(toSync) { toSync.panBy(offset, options, true); }); } console.log(offset); return L.Map.prototype.panBy.call(this, offset, options); }, _onResize: function(event, sync) { if (!sync) { originalMap._syncMaps.forEach(function(toSync) { toSync._onResize(event, true); }); } return L.Map.prototype._onResize.call(this, event); }, _stop: function(sync) { L.Map.prototype._stop.call(this); if (!sync) { originalMap._syncMaps.forEach(function(toSync) { toSync._stop(true); }); } } }); originalMap.dragging._draggable._updatePosition = function() { L.Draggable.prototype._updatePosition.call(this); var self = this; originalMap._syncMaps.forEach(function(toSync) { const { x, y } = self._newPos; L.DomUtil.setPosition(toSync.dragging._draggable._element, { x, y: -y }); toSync.eachLayer(function(layer) { if (layer._google !== undefined) { var offsetFn = originalMap._syncOffsetFns[L.Util.stamp(toSync)]; var center = offsetFn( originalMap.getCenter(), originalMap.getZoom(), originalMap, toSync ); layer._google.setCenter(center); } }); toSync.fire('move'); }); }; } }); })(); }33:[{"id":"1cd3c8e5cabb6dcc5fe269847b90aa203250214d09e8e9266d234c16757ea1d1a5dc91afe457bfc91fd2bbd87156286ed772dec12681d5928403437ed3838002","href":"https://static.observableusercontent.com/files/1cd3c8e5cabb6dcc5fe269847b90aa203250214d09e8e9266d234c16757ea1d1a5dc91afe457bfc91fd2bbd87156286ed772dec12681d5928403437ed3838002","name":"earth-sandwich.png","type":"image/png","lastModified":1579640942799.07,"size":881430}] 2e:{"title":"Earth Sandwich","cells":[{"id":0,"value":"md`# Earth Sandwich`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"html`\n\n

\n \n ${await FileAttachment(\"earth-sandwich.png\").image()}\n \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"newZealand = [-36.86377, 174.90031];","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"spain = [36.86377, -5.09969]","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`## Remixes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"L = require(\"leaflet@1.6.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"d3 = require(\"d3@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"world = fetch(resolve(\"world-atlas@2/countries-110m.json\")).then(response =>\n response.json()\n)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}