We Keep Coding

How to modify or remove some existing data in GeoJSON Leaflet object?

Recently I asked about referencing the data of an existing GeoJSON Leaflet object. My Leaflet map consists of data coming in a stream to my GeoJSON Leaflet object. User inputs can change a filter for the GeoJSON data, so to make the filter apply to both the existing and new data I am keeping track of my data in an array called myFeatures. Whenever the filters change or an item in myFeatures changes, I do the following:
myGeoJson.clearLayers();
myGeoJson.addData(myFeatures);
This is working to make my map update according to the newly updated feature data or the changes in the filter.
I am applying pop-ups to the GeoJSON object when I initialize my GeoJSON object:
var myGeoJson = L.geoJson(myFeatures, {
style: function(feature) {
...
},
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
},
filter: function(feature, layer) {
...
},
onEachFeature: function(feature, layer) {
if (feature.properties && feature.properties.popupContent) {
layer.bindPopup(feature.properties.popupContent);
}
}
});
When I click on an individual feature, the pop-up appears. However, the pop-up dismisses pretty quickly, thanks to clearLayers and addData being called. :(
Is there some kind of way to stop the pop-up dismissing in this situation?
Or - better question - is there a way to modifying existing data in a GeoJSON object or remove some (not all) data from a GeoJSON object?
To provide some context, my GeoJSON shows circle markers for each feature. The circle markers are colored based on a property of the feature. The property can actually change over time, so the marker's styling needs to be updated. A marker also times out after a while and needs to be removed from the map, but the other markers need to stay on the map.

There are for sure better ways to do that, but if you don't want to modify your code architecture too much, you could just create your popups in a specific layer, which you won't clear when you add your new data.
To give you an idea (markers play below the role of myGeoJson in your example):
var popup_id = {};
var popup_layer = new L.layerGroup();
var markers = new L.layerGroup();
$.each(testData, function(index, p) {
var marker = L.marker(L.latLng(p.lat, p.lon));
markers.addLayer(marker);
popup = new L.popup({offset: new L.Point(0, -30)});
popup.setLatLng(L.latLng(p.lat, p.lon));
popup.setContent(p.text);
popup_id[p.id] = popup;
marker.on('click', function() {
popup_id[p.id].openPopup();
popup_layer.addLayer(popup_id[p.id]);
markers.clearLayers();
})
});
popup_layer.addTo(map);
markers.addTo(map);
You also keep track of all your popups in a dictionary popup_id.
Since you haven't provided us with a JSfiddle it is a bit difficult to find the perfect answer for your case, but I hope that the popup layer (also here in my fiddle) gives you a good direction.

Leaflet js map only showing a few tiles

I'm trying to create an custom stationary map using the Leaflet JavaScript library and keep running into a major issue where most of the map tiles for the coordinates do not render. I'm defining & showing the map like so
function initmap() {
map = new L.Map('map');
var osmUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png';
var osm = new L.TileLayer(osmUrl);
map.addLayer(osm);
}
var lat = 40.120910;
var lng = -74.978602;
var startLatLng = new L.LatLng(lat, lng);
initmap();
map.setView(startLatLng, 16);
It seems like it should work, but the map div never shows the full map/all tiles. I know there is coverage for this particular area because I've been using another person's service that using this library and map to look at this location. This code is structured based off of their code.
This website is using the exact coordinates, map server, and the leaflet js script and is able to render all tiles fine.
Here's a JSFiddle to show the code (and issue) in action. Any idea why this is happening or how to fix it?

Missing Leaflet CSS: https://npmcdn.com/leaflet#1.0.0-rc.1/dist/leaflet.css
Updated JSFiddle: https://jsfiddle.net/t14rLknv/7/
(BTW you can upgrade to Leaflet 1.0.0-rc.3, new official CDN on unpkg.com, see http://leafletjs.com/download.html)

Leaflet omnivore + clustering markers + filtering marker cluster group

I try to make a map with mapbox and omnivore plugin of Leafet in order to search a data with the tutorial. I don't know how integrate this code from omnivore plugin in my case. I use for my datas a geojson url $.getJSON, clustering markers with MarkerCluster of Leaflet.
Thank you for your response.
Best regards.
Sandrine
EDIT
I try to filter marker cluster group with Mapbox js tool.
It works very well but I would like to insert this feature to my project. But I don't know how to make with the other features : omnivore plugin, search the data, displaying the popup, marker cluster group. Could you help me ?
My js Fiddle "filtering marker cluster group" : https://jsfiddle.net/sduermael78/rgoxpxwq/4/
My project : https://jsfiddle.net/sduermael78/1uuubmwb/42/

You currently load your data through both jQuery $.getJSON and directly from your mapbox account.
Then if my understanding is correct, you would like to replace these methods by using leaflet-omnivore plugin?
Direct replacement is quite straight forward, as you could directly use:
var geojsonLayer = omnivore.geojson("filePath", null, L.mapbox.featureLayer());
geojsonLayer.addTo(map);
Now it becomes slightly more complicated when you want to cluster your markers (using Leaflet.markercluster plugin in your case). But it is similar to $.getJSON since both perform an asynchronous AJAX request, and you have to make the conversion in a callback.
With leaflet-omnivore, you use the .on("ready", callback) syntax:
var geojsonLayer = omnivore.geojson("filePath", null, L.mapbox.featureLayer())
.on("ready", function() {
var markers = L.markerClusterGroup();
markers.addLayer(geojsonLayer);
markers.addTo(mymap);
});
Updated JSFiddle: https://jsfiddle.net/1uuubmwb/39/
EDIT
OK I missed your part where you "want to search the data" as done in the tutorial from mapbox you point to.
In your case it is more complicated as you want to cluster your markers, so you do not directly have your mapbox feature layer, but a marker cluster group.
A workaround would be to replace the content of that cluster group everytime you change the filtering condition on your geojsonLayer mapbox feature layer:
// this will "hide" markers that do not match the filter.
geojsonLayer.setFilter(showCode);
// replace the content of marker cluster group.
markers.clearLayers();
markers.addLayer(geojsonLayer);
Then for your popup, you have to create it and bind it manually, as mapbox feature layer needs your GeoJSON data to use the title attribute (if so, it automatically uses that info to fill the popup / "tooltip" content):
function attachPopups() {
// Create popups.
geojsonLayer.eachLayer(function (layer) {
var props = layer.feature.properties;
layer.bindPopup(
"<b>Code unité :</b> " + props.CODE_UNITE + "<br />" +
"<b>Adresse web :</b> <a href='" + props.ADRESSE_WEB + "' target='_blank'>" + props.ADRESSE_WEB + "</a>"
);
});
}
Unfortunately, it looks like .setFilter() removes that popup, so you would need to call this attachPopups() function after every setFilter.
Demo: https://jsfiddle.net/1uuubmwb/40/

Thank you for your answer. In fact, I would like to use leaflet-omnivore plugin in order to search a data from geojson with url.
The tutorial is : https://www.mapbox.com/mapbox.js/example/v1.0.0/filtering/
"Use setFilter as a fast search to filter out markers based on a user query".
How to display the popup from geojson with url in these new case ? layer.bindPopup(feature.properties.CODE);
Can I use all this features to build my map (search on markers, clustering markers...) ?

Use external links to open popup windows on leaflet map in drupal

Ok, here is my situation. I am using the leaflet map module with drupal. I have the map integrated on my website with views. I have nodes that contain content that I want to be displayed via a popup window. When I click each individual marker, the popup works exactly as I want. however, I want to be able to click an external link to be able to also open the popup. I have viewed and implemented this code from another question:
var markers = [];
var marker1 = L.marker([51.497, -0.09],{title:"marker_1"}).addTo(map).bindPopup("Marker 1");
markers.push(marker1);
var marker2 = L.marker([51.495, -0.083],{title:"marker_2"}).addTo(map).bindPopup("Marker 2");
markers.push(marker2);
var marker3 = L.marker([51.49, -0.097],{title:"marker_3"}).addTo(map).bindPopup("Marker 3");
markers.push(marker3);
function markerFunction(id){
for (var i in markers){
var markerID = markers[i].options.title;
if (markerID == id){
markers[i].openPopup();
};
}
}
$("a").click(function(){
markerFunction($(this)[0].id);
});
by user abenrob, but that doesn't work with markers generated by drupal.
My question has 2 parts, as I can see it.
1: How do I access the map inside my different block? I have set up the links from my menu block to call my function that contains the aforementioned code, and they call it correctly. However, when my Javascript needs to speak to the map, I get nothing.
Currently I have "var map = document.getElementById('leaflet-map');", but that seems to be pulling the div, not the map contained inside the div.
2: How do I access the list of markers generated by my map in drupal. Currently, as a test, I am just generating a marker manually and using the bindPopup function to bind the div containing the popup on the page, but I can't add it to the map (see part 1). Ideally I would not want to recreate the markers in javascript if they are already created in Drupal, but we don't always live in an ideal world, but it seems that if I get the map to connect, I could at least work with that.

In case anyone else stumbles across this with the same question, I figured out the first question. I accessed the map created by Drupal through the Leaflet module by utilizing the following code:
// This accesses the leaflet map created by drupal and sets the map variables so that they can be used with the functions
var map;
$(document).bind('leaflet.map', function(e, settingsLeaflet, lMap)
{
map = lMap;
});
I am still working on the second question. When I figure it out, I will add another update.
Edit: I was able to access the markers in the second question by using the following code:
var markers = {};
var markersList = [];
// This accesses the leaflet map features and pulls the marker variables so that they can be used with the functions
$(document).bind('leaflet.feature', function(e, lFeature, feature)
{
markers[feature.feature_id] = lFeature;
markersList.push(lFeature);
});
from there it was as easy as looping through the markers list, as such:
// This function takes the variable id, which is passed from the HTML call of this function. It then loops through the marker list and compares the id with the value of the title of each marker. If it finds a match, then it opens the popup bound to that specific marker.
function markerPopups(id)
{
// Loops through the markers list
for (var i = 0; i < markersList.length; i++)
{
// Sets a variable to get the title of the marker, which
var markerID = markersList[i].options.title.replace(/[^a-zA-Z0-9]/g, '_');
// Compares the variable passed through the function to the title of the marker. If there is a match, it opens the popup for that marker.
if(markerID == id)
{
markersList[i].openPopup();
}
}
}
Also, it wasn't needed to access the map once you accessed the pre-made markers, so you can ignore the first part, unless you need to use the map for anything else.

Bing get cursor location

Im developing an webapplication using Bing Maps V7.0
I've created a fully functional context menu, but now i want to implement it using driving directions and then i need to get the lat lon of the cursor when it's right clicked and the menu are brought up. This is how you create it in an old Bing Maps version. But it doesn't work anymore.
e.view.LatLong.Latitude
So if anyone know the new method for finding the cursor location when clicked please tell me.

It's changed to:
e.target
.tryPixelToLocation(new Microsoft.Maps.Point(e.getX(), e.getY()))
.latitude
I found the code on the MouseEventArgs documentation page:
map = new Microsoft.Maps.Map(
document.getElementById("myMap"),
{credentials:"Bing Maps Key"}
);
Microsoft.Maps.Events.addHandler(map, 'click', displayEventInfo);
// ...
function displayEventInfo(e) {
if (e.targetType == "map") {
var point = new Microsoft.Maps.Point(e.getX(), e.getY());
var loc = e.target.tryPixelToLocation(point);
document.getElementById("textBox").value = loc.latitude
+ ", " + loc.longitude;
}
}