I've integrated a MapBox map with marker clustering. For some reason the descriptions/titles will not show when you click on the marker.
Any idea why this is happening or how to fix it?
The page: https://vpnarea.com/front/member/signuptest
My MapBox code:
<script>
L.mapbox.accessToken = 'pk.xxxxxxxxxxxxxxxxxxxxxxx';
var markers = L.markerClusterGroup();
$.getJSON("https://vpnarea.com/data2.geojson-copy", function(data) {
var geojson = L.geoJson(data, {
onEachFeature: function (feature, layer) {
layer.setIcon(L.mapbox.marker.icon({'marker-color': 'f5c200','marker-size': 'small'}));
}
});
markers.addLayer(geojson);
// CONSTRUCT THE MAP
var map = L.mapbox.map('map1', 'vpnarea.m9b2pf4n') .setView([60, -55], 3);
markers.addTo(map);
});
</script>
You'll need to bind popups in order for them to appear: Mapbox.js's L.mapbox.featureLayer does this by default, but you're using L.geoJson, which does not. So you'll need to check out the Leaflet documentation for .bindPopup and use it.
Related
I am trying to bind popups to markers on a geoJSON layer. To do this, I am using the onEachFeature function:
var onEachFeature = function(feature, layer) {
layer.bindPopup("hello",
{closeButton:false,
autoClose: false,
closeOnClick: false,
className: "popup-custom"}).openPopup();
}
This does not result in a popup showing. The popup is created but I need to click on the marker to display it.
What am I missing to make the popup visible without clicking on the marker?
I am not using the pointToLayer function because I am also filtering the features with the filter fuction and using request to customise the popups and the markers (the popup binding is actually in a callback function).
You get a geojsonlayer as result and then you can open the popup for each layer:
var geojsonLayer = L.geoJSON(data, {
onEachFeature : onEachFeature
}).addTo(map);
geojsonLayer.eachLayer(function(layer){
layer.openPopup();
});
Thank you #Falke-Design, I got it to work. I had tried this but it did not work :
var geojsonLayer = L.geoJSON(data, {
onEachFeature : onEachFeature
});
geojsonLayer.eachLayer(function(layer){
layer.openPopup();
});
geojsonLayer.addTo(map);
Could you explain why this did not work?
I have a map with a lot of markers and a complex popup content, generated by a function called popupcontent(), which takes a lot of time to compute when it is done for all markers on the map with the oneachfeature function.
Is there a way to trigger a function in a popup only when it is actually opened instead of generating all the popups in the beginning? This would speed up loading time a lot.
This is my code so far (I am using the markerclusterer extension):
var geojson1 = L.geoJson(bigJson,{
onEachFeature: function (feature, layer) {
layer.bindPopup(popupcontent(feature,layer));
}
})
.addLayer(tiles);
var markers = L.markerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: true,
zoomToBoundsOnClick: true,
disableClusteringAtZoom: 10,
removeOutsideVisibleBounds:true
});
var geoJsonLayer = L.geoJson(bigJson, {
});
markers.addLayer(geojson1);
map.addLayer(markers);
map.fitBounds(markers.getBounds());
Demo: http://stefang.cepheus.uberspace.de/farmshops/
I think what you're looking for is something like so (if your layer is an interactive layer):
onEachFeature: function (feature, layer) {
layer.once("click", ()=>{
layer.bindPopup(popupcontent(feature,layer)).openPopup();
});
}
Use "once" instead of "on" so it only gets binded once when the layer is clicked.
I am working on an ArcGIS map. I need to be able to interact with KML layers.
Here is a minimal version of my current code:
map = new Map("map", {
basemap: "topo",
center: [-108.663, 42.68],
zoom: 6
});
parser.parse();
var kmlUrl = "https://dl.dropboxusercontent.com/u/2142726/esrijs-samples/Wyoming.kml";
var kml = new KMLLayer(kmlUrl);
map.addLayer(kml);
kml.on("load", function() {
console.log("done");
});
Here is a fiddle
I'm looking to achieve something more like this map, which outlines the layer on hover. (This example is from the FeatureLayer class, but my KML is dynamically generated. Is it possible to create a featurelayer dynamically from KML data?)
How can I listen for mouseover on a KML shape?
I figured it out...
var kmlUrl = "https://dl.dropboxusercontent.com/u/2142726/esrijs-samples/Wyoming.kml";
var kml = new KMLLayer(kmlUrl);
map.addLayer(kml);
kml.on("load", function() {
var layers = kml.getLayers()
layers[0].on("mouse-over", function () {
alert("test");
});
});
Turns out the KML layer is actually composed of FeatureLayers. The solution is to get the Feature Layers from the KMLLayer wi the getLayers() method.
I am showing a temporal range of refugee camps on my map by using the LeafletSlider plugin. The camps appear on the map based on an attribute in my GEOJSON object called DATE_START. As you can see in my JSFIDDLE, the slider works good.
As I am scrubbing the timeline , I want to remove the markers that have a DATE_CLOSED property depending on the date of the current timeline scrub and the date of the DATE_CLOSED property.
It looks like this timeslider plugin only shows markers. Does anyone know how to hide the markers after it date has closed?
Sample data:
var camps = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"STATUS":"UNOCCUPIED","DATE_START":"2015-06-23","DATE_CLOSED":"2016-01-23"},"geometry":{"type":"Point","coordinates":[64.6875,34.97600151317591]}},{"type":"Feature","properties":{"STATUS":"OCCUPIED","DATE_START":"2014-01-21","DATE_CLOSED":"2015-05-25"},"geometry":{"type":"Point","coordinates":[65.335693359375,36.26199220445664]}},{"type":"Feature","properties":{"STATUS":"UNOCCUPIED","DATE_START":"2015-09-13","DATE_CLOSED":""},"geometry":{"type":"Point","coordinates":[67.587890625,35.969115075774845]}}]};
Code:
var map = L.map('map', {
center: [33.67406853374198, 66.9287109375],
zoom: 7
}).addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));
//Create a marker layer (in the example done via a GeoJSON FeatureCollection)
var testlayer = L.geoJson(camps, {
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.DATE_START);
}
});
var sliderControl = L.control.sliderControl({
position: "topright",
layer: testlayer,
timeAttribute: 'DATE_START'
});
//Make sure to add the slider to the map ;-)
map.addControl(sliderControl);
sliderControl.options.markers.sort(function(a, b) {
return (a.feature.properties.DATE_START > b.feature.properties.DATE_START);
});
//And initialize the slider
sliderControl.startSlider();
$('#slider-timestamp').html(options.markers[ui.value].feature.properties.DATE_START.substr(0, 10));
I hope this counts as an answer, but I discovered there was an alternative timeline plugin that does just what I needed: https://github.com/skeate/Leaflet.timeline
I am new to Mapbox, so please bear with me.
I have uploaded my geoJson to my Mapbox map and am now editing it via javascript, creating the map by calling the following function.
$scope.initMap = function() {
var map = L.mapbox.map('map', 'example.hk78fg64');
};
The map works fine, but I want to style the default markers. How can I style these markers being pulled in from Mapbox directly? All examples for styling them have the markers being created on the spot inside the geoJson function (view the expression below)
L.geoJson(geoJson, {
pointToLayer: L.mapbox.marker.style,
});
See the L.mapbox.map documentation:
$scope.initMap = function() {
var map = L.mapbox.map('map', 'example.hk78fg64', { featureLayer: {
pointToLayer: L.mapbox.marker.style }
});
};