I have an instance of a Mapbox GL map, after load of my data source I am calling fitBounds() to change the map's center and zoom to fit my data set. I've also attached a number of event listeners to this map because I want to know when the user manually changed the map's zoom or position.
Mapbox also triggers 'movestart' and 'zoomstart' on fitBounds(), though I'm getting around that problem by checking for the presence of the originalEvent property in the event callback.
The problem is, I also have a NavigationControl added to the map, and user interactions triggered through its zoom or rotate buttons fire my map events without the originalEvent property. I cannot find any way in the Mapbox documentation to listen attach event listeners to the NavigationControl, nor a way to differentiate between a zoom / pan initiated by a fitBounds call vs. a user interaction through that component.
Is there something I'm missing? Is there a way to attach mouse / touch event listeners to the NavigationControl component? Or perhaps is there some property within the event objects that will tell me the source of the event?
Simplified code sample -
this._userMoved = false;
this._map = new mapboxgl.Map(options);
// listen for user actions that update the map display
['movestart', 'zoomstart', 'boxzoomstart', 'rotatestart', 'pitchstart'].forEach((action) => {
this._map.on(action, (e) => {
if (e.originalEvent) {
// if this property is set, the event in question was triggered by an actual user ineraction.
// EXCEPT when the user interaction came from the NavigationControl, hence the problem
this._userMoved = true;
}
});
});
this._map.on('load', () => {
// add the control after map load
this._map.addControl(new mapboxgl.NavigationControl(),'top-left');
this._setMapData(); // adds my data source to the map
this._setMapView(); // calls this._map.fitBounds() using my data source
});
If your need is specifically to handle a specific event (fitbounds) that is being called once, then you can do this:
this._map.once('moveend', e => {
// do whatever you do after the fitbounds event.
this._map.on(['movestart', 'zoomstart', 'boxzoomstart', 'rotatestart', 'pitchstart'], userMovementHandler)
});
EDIT
I just looked more closely at the documentation and there is indeed an eventData parameter to fitBounds which is intended to solve exactly this problem.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic3RldmFnZSIsImEiOiJGcW03aExzIn0.QUkUmTGIO3gGt83HiRIjQw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
center: [-74.50, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
}).on('moveend', e => {
if (e.source === 'fitBounds') {
console.log('Caused by fitBounds');
} else {
console.log('Caused by user');
}
})
map.fitBounds([140,-42, 150,-37], {}, {source: 'fitBounds'})
</script>
</body>
</html>
Related
The content in the popup created through the variable "popupCustom" is displaying string instead of referencing the specified field {IN_COUNTRY}. I followed the ArcGIS JS API Popup Tutorials, & can't see what my error is in failing to grab the attributes associated with that field. Here's the code -- any help is greatly appreciated!
*note: feature layer url within "Cyber_Areas" variable points to REST URL for referenced Feature Class.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Search widget with multiple sources - 4.6</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
"esri/widgets/Legend",
"esri/layers/TileLayer",
"esri/layers/FeatureLayer",
"esri/widgets/Search",
"esri/widgets/LayerList",
"esri/PopupTemplate",
"dojo/on",
"dojo/domReady!"
], function(
Map,
MapView,
BasemapToggle,
Legend,
TileLayer,
FeatureLayer,
Search,
LayerList,
PopupTemplate,
on
) {
var Cyber_Areas = new FeatureLayer({
url: "*inserturl*",
outFields: ["IN_COUNTRY"],
popupTemplate: popupCustom
});
var map = new Map({
basemap: "osm"
});
map.add(Cyber_Areas);
var view = new MapView({
container: "viewDiv",
map: map,
center: [-87.172865, 34.077613], // lon, lat
zoom: 16
});
var searchWidget = new Search({
view: view,
popupOpenOnSelect: false
});
view.ui.add(searchWidget, {
position: "top-left",
index: 0
});
var popupCustom = searchWidget.on('select-result', function(evt){
//console.info(evt);
view.popup.open({
location: evt.result.feature.geometry, // location of the click on the view
title: "Service Availability:", // title displayed in the popup
content: "<p><b>{IN_COUNTRY}"
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
From your code you are mixing the popup template value with when to display it. And those are two different things.
First, you are not setting correctly the popup template of the layer. It should be a PopupTemplate.
It seems to me that in you code the layer definition should be something like this,
var Cyber_Areas = new FeatureLayer({
url: "*inserturl*",
popupTemplate: {
outFields: ["IN_COUNTRY"],
title: "Service Availability:",
content: "<p><b>{IN_COUNTRY}</b></p>"
}
});
Now if you don't want the default behavior of the popup (left click on a feature), you cant disable it like this,
view.popup.autoOpenEnabled = false; // <- disable view popup auto open
And then you can open it wherever you want like this,
view.popup.open({ // <- open popup
location: evt.result.feature.geometry, // <- use map point of the event result
fetchFeatures: true // <- fetch the selected features (if any)
});
You have to understand that the fields you use in the content of the popup template are related to the layer. That is why i set in the popup of the view to fetch the results.
I'm trying to find my way into Svelte combined with leaflet. Where I'm stuck is how to correctly split the leaflet components into files. For learning, I'm trying to build the official official leaflet quickstart with svelte.
This is how my app.svelte looks like:
<script>
import L from 'leaflet';
import { onMount } from "svelte";
import { Circle } from "./components/Circle.svelte";
let map;
onMount(async () => {
map = L.map("map");
L.tileLayer("https://a.tile.openstreetmap.org/{z}/{x}/{y}.png ", {
attribution:
'Map data © OpenStreetMap contributors, CC-BY-SA',
maxZoom: 18,
tileSize: 512,
zoomOffset: -1
}).addTo(map);
map.setView([51.505, -0.09], 13);
Circle.addTo(map);
});
</script>
<style>
html,body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100vw;
}
</style>
<svelte:head>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
</svelte:head>
<div id="map" />
and my circle component:
<script context="module">
import L from 'leaflet';
export let map_obj;
export let Circle = L.circle([51.508, -0.11], {
color: "red",
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
});
</script>
While this is working I do not think it's effective to consider every component and add it to the map with Circle.addTo(map);. How could I pass in the map object to the circle component or is there some better pattern to build the map with several components?
Note: I do know of svelte/leaflet but like to start from scratch for learning.
This seemingly easy task is complicated due to the not-really-straightforward lifecycle of frameworks like Svelte, and the really-straightforward let-me-do-DOM-stuff architecture of Leaflet.
There are several approaches to this. I'll describe one, based on nesting Svelte components for Leaflet layers inside a Svelte component for a Leaflet map, and using setContext and getContext to handle the Leaflet L.Map instance around. (I'm borrowing this technique from https://github.com/beyonk-adventures/svelte-mapbox )
So a Svelte component for a L.Marker would look like:
<script>
import L from 'leaflet';
import { getContext } from "svelte";
export let lat = 0;
export let lng = 0;
let map = getContext('leafletMapInstance');
L.marker([lat, lng]).addTo(map);
</script>
Easy enough - get the L.Map instance from the Svelte context via getContext, instantiate the L.Marker, add it. This means that there must be a Svelte component for the map setting the context, which will need the components for the markers slotted in, i.e.
<script>
import LeafletMap from './LeafletMap.svelte'
import LeafletMarker from './LeafletMarker.svelte'
</script>
<LeafletMap>
<LeafletMarker lat=40 lng=-3></LeafletMarker>
<LeafletMarker lat=60 lng=10></LeafletMarker>
</LeafletMap>
...and then the Svelte component for the Leaflet map will create the L.Map instance, set it as the context, and be done, right? Not so fast. This is where things get weird.
Because of how Svelte lifecycle works, children components will get "rendered" before parent components, but the parent component needs a DOM element to create the L.Map instance (i.e. the map container). So this could get delayed until the onRender Svelte lifecycle callback, but that would happen after the slotted children get instantiated and their onRender lifecycle callbacks are called. So waiting for Svelte to instantiate a DOM element to contain the map and then instantiate the L.Map and then pass that instance to the context and then getting the context in the marker elements can be quite a nightmare.
So instead, an approach to this is to create a detached DOM element, instantiate a L.Map there, i.e. ...
let map = L.map(L.DomUtil.create('div')
...set it in the context, i.e. ...
import { setContext } from "svelte";
setContext('leafletMapInstance', map);
...this will allow Leaflet layers instantiated by the slotted components to be added to a detached (and thus invisible) map. And once all the lifecycle stuff lets the Svelte component for the L.Map have an actual DOM element attached to the DOM, attach the map container to it, i.e. have this in the HTML section of the Svelte component...
<div class='map' bind:this={mapContainer}>
...and once it's actually attached to the DOM, attach the map container to it and set its size, i.e. ...
let mapContainer;
onMount(function() {
mapContainer.appendChild(map.getContainer());
map.getContainer().style.width = '100%';
map.getContainer().style.height = '100%';
map.invalidateSize();
});
So the entire Svelte component for this Leaflet L.Map would look more or less like...
<script>
import L from "leaflet";
import { setContext, onMount } from "svelte";
let mapContainer;
let map = L.map(L.DomUtil.create("div"), {
center: [0, 0],
zoom: 0,
});
setContext("leafletMapInstance", map);
console.log("map", map);
L.tileLayer("https://a.tile.openstreetmap.org/{z}/{x}/{y}.png ", {
attribution:
'Map data © OpenStreetMap contributors, CC-BY-SA',
}).addTo(map);
onMount(() => {
mapContainer.appendChild(map.getContainer());
map.getContainer().style.width = "100%";
map.getContainer().style.height = "100%";
map.invalidateSize();
});
</script>
<svelte:head>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""
/>
</svelte:head>
<style>
.map {
height: 100vh;
width: 100vw;
}
</style>
<div class="map" bind:this="{mapContainer}">
<slot></slot>
</div>
See a working example here.
As a side note, I'll say that one should think it twice before sandwiching Leaflet in another JS framework, and think twice about the architecture for this (slotted components seem the cleanest and most extensible, but maybe a big data structure and some imperative programming for the Leaflet bits would be simpler). Sometimes, making sense of the lifecycle implications of more than one framework working at once can be very confusing, and very time-consuming when bugs appear.
I have a map which is refreshed every 30 seconds and on each refresh I fit bounds to the new data. I would like to change the way I fit bounds if a user has manipulated the map, e.g. changed zoom level. My problem is that zoom triggered from fitBounds is indistinguishable from user action.
How do I capture/extend mousewheel on the map?
Basically there are multiple ways todo same, but you can go with following simple way to distinguish user zoom triggered.
The onwheel event occurs when the mouse wheel is rolled up or down over an element.
var map = L.map('map', {
// Set latitude and longitude of the map center (required)
center: [12.99766, -84.90838],
// Set the initial zoom level, values 0-18, where 0 is most zoomed-out (required)
zoom: 5,
// scrollWheelZoom: false
});
// Create a Tile Layer and add it to the map
var tiles = new L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png').addTo(map);
document.getElementById("map").addEventListener("wheel", myFunction);
function myFunction() {
alert("Mouse wheel Scrolled by user.")
}
#map {
width: 500px;
height: 400px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<div id="map"></div>
Hope this will helps you.
In my previous post 'Leaflet JS - changing esri shape into marker on certain zoom level
' I was able to resolve an issue which i had with the leaflet JS library and changing the polygon shapes to markers icons when hitting a certain zoom level.
I was advised by 'Ivan Sanchez' to use the 'Leaflet.Deflate' plugin and this works like a charm, so now the various shapes are being transformed into markers after a certain zoomlevel, however now I'm struggling to change the default leaflet marker icon to a custom marker icon, so my question now is:
Is it possible to change the default marker icon to a custom marker icon while using the 'Leaflet.ShapeFile' and 'Leaflet.Deflate' plugin and what would be the best approach to do this?
I wanted to make a JSFiddle, but I don't JSFiddle allows me to attach the zip file contains the shapefiles, so I will post the code I have got so far below here, thanks for your help, advise and support:
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8' />
<title>v4</title>
<link rel="stylesheet" type="text/css" href="lib/leaflet/leaflet.css" />
<!--[if lte IE 8]> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /> <![endif]-->
<link rel="stylesheet" type="text/css" href="lib/leaflet/L.Control.Sidebar.css" />
<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map { height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script src="lib/jquery/jquery-3.1.1.min.js"></script>
<script src="lib/leaflet/leaflet.js"></script>
<script src="lib/leaflet/catiline.js"></script>
<script src="lib/leaflet/leaflet.shpfile.js"></script>
<script src="lib/leaflet/shp.js"></script>
<script src="lib/leaflet/L.Control.Sidebar.js"></script>
<script src="lib/leaflet/L.Deflate.js"></script>
<script>
// init map
var m = L.map('map').setView([52.472833, 1.749609], 15);
// clicking on the map will hide the sidebar plugin.
m.on('click', function () {
sidebar.hide();
});
// init Deflate plugin
L.Deflate({ minSize: 10 }).addTo(m);
// Init side bar control
var sidebar = L.control.sidebar('sidebar', { closeButton: true, position: 'right' });
m.addControl(sidebar);
// Init esri shape file via leaflet.shapefile, shp.js plugin
var businessProperties = new L.Shapefile('data/businessshapes.zip', { style: propertyStyle, onEachFeature: propertyOnEachFeature }).addTo(m);
// create on-click Feature
function propertyOnEachFeature(feature, layer) {
layer.on( {
mouseover: highlightFeature,
mouseout: resetHighlight,
click: function populate() {
sidebar.toggle();
document.getElementById('pinfoHeader').innerHTML = "<h2>" + feature.properties.Building + " - Detailed Information</h2><br />";
document.getElementById('pTitle').innerHTML = "Name: " + feature.properties.Building
document.getElementById('pDetails').innerHTML = "SHAPE_Leng: " + feature.properties.SHAPE_Leng + "<br/ >SHAPE_Area: " + feature.properties.SHAPE_Area
}, highlightFeature, zoomToFeature
});
}
// style the properties style
function propertyStyle(feature) {
return {
fillColor: getPropertyColor(feature.properties.BusType),
weight: 2,
opacity: 1,
color: 'white',
dashArray: 3,
fillOpacity: 0.7
}
}
// set color per property according to the data table of the Esri Shape file.
function getPropertyColor(propStatus) {
if (propStatus == 'TypeA') {
return 'red';
} else if (propStatus == 'TypeB') {
return 'green';
} else {
return 'yellow';
}
}
// set the highlighted color for polygon
function highlightFeature(e) {
var layer = e.target;
layer.setStyle( {
weight: 2,
color: 'black',
fillColor: 'white',
fillOpacity: 0.2
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
// reset the highlighted color for polygon after mouse leave polygon
function resetHighlight(e) {
businessProperties.resetStyle(e.target);
}
//Extend the Default marker class to overwrite the leaflet.deflate marker icon???
var TestIcon = L.Icon.Default.extend({
options: {
iconUrl: 'assets/images/markers/business.png'
}
});
var testIcon = new TestIcon();
businessProperties.addTo(m);
// Init base maps for switch
var grayscale = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { id: 'MapID', attribution: 'Map maintained by Demo LTD, — Map data © OpenStreetMap,' }).addTo(m);
var streets = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { id: 'MapID', attribution: 'Map maintained by Demo LTD, — Map data © OpenStreetMap,' });
var baseMaps = {
"Streets": streets,
"Grayscale": grayscale
};
// Init overlay map switch
var overlayMaps = {
"Bussines Properties": businessProperties
};
// Add switches to map control
L.control.layers(baseMaps, overlayMaps).addTo(m);
</script>
</body>
</html>
Is it possible to change the default marker icon to a custom marker icon while using the 'Leaflet.Deflate' plugin?
The answer is: No.
The current code for Leaflet.Deflate uses a default marker and a default marker only, see https://github.com/oliverroick/Leaflet.Deflate/blob/991f51ca82e7bb14a17c8d769b4c378c4ebaf700/src/L.Deflate.js#L42
You could hack your way around it, but I would rather recommend filing a feature request in the Leaflet.Deflate repo. It should be possible to modify the Leaflet.Deflate repo to allow line/polygon features to have some extra properties to be used as marker options.
I've followed this tutorial:
http://popcornjs.org/popcorn-101
Tutorial Code
<!doctype html>
<html>
<head>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<script>
// ensure the web page (DOM) has loaded
document.addEventListener("DOMContentLoaded", function () {
// Create a popcorn instance by calling Popcorn("#id-of-my-video")
var pop = Popcorn("#ourvideo");
// add a footnote at 2 seconds, and remove it at 6 seconds
pop.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
// play the video right away
pop.play();
}, false);
</script>
</head>
<body>
<video height="180" width="300" id="ourvideo" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm">
</video>
<div id="footnotediv"></div>
</body>
</html>
And can run this locally.
In Firebug, I see the footnote div update from:
<div style="display: none;">Pop!</div>
to:
<div style="display: inline;">Pop!</div>
On a live site however, I am loading my page html from a MongoDB database via Ajax and the footnote display functionality doesn't seem to be working.
Thinking this might have something to do with needing to 're-initialise' after the content has loaded, I've added the popcorn.js functionality to a function called on click:
Function
<script>
function myPopcornFunction() {
var pop = Popcorn("#ourvideo");
pop.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
pop.play();
}
</script>
Call
$(document).on("click","a.video", function (e) {
// passing values to python script and returning results from database via getJSON()
myPopcornFunction();
});
This doesn't seem to have an effect.
No footnotediv content is loaded when the video plays.
The video is also not playing automatically.
It's hard to reproduce in jsFiddle with dynamic content, so is there a generic approach to ensuring popcorn works with dynamically loaded content?
Firebug Error on click
TypeError: k.media.addEventListener is not a function
It seems to have been a timing issue in that originally I had made a call to the myPopcornFunction() outside of the function which loaded the content (a getJSON() function). When I placed the call within the same block as the getJSON() function, things seemed to maintain their 'order' and popcorn could work correctly.
Before
$(document).on("click","a.video", function (e) {
$.getJSON("/path", {cid: my_variable, format: 'json'}, function(results){
$("#content_area").html("");
$("#content_area").append(results.content);
});
e.preventDefault();
myPopcornFunction(); // the call WAS here
});
After
$(document).on("click","a.video", function (e) {
$.getJSON("/path", {cid: my_variable, format: 'json'}, function(results){
$("#content_area").html("");
$("#content_area").append(results.content);
myPopcornFunction(); // the call is now HERE
});
e.preventDefault();
});
The myPopcornFunction() was the same as in the original post.