I have a problem where the marker clusters work and show the number of items in the cluster, however the icons don't show up. When I zoom in, individual icons show, but from far away the cluster icons don't. Here's the code where I set up the data in the cluster:
// Marker cluster
var producerLayer = new L.MarkerClusterGroup();
// Loop through the lp array
for (var i=0; i < lp.length; i++) {
var name = lp[i][0];
var place = lp[i][1];
var lat = lp[i][2];
var lng = lp[i][3];
var liscence = lp[i][4];
var risk = lp[i][5];
var icon = greenIcon;
var markerLocation = new L.LatLng(lat, lng);
var marker = new L.Marker(markerLocation, {icon});
var content = '<div class="info_content">' +
'<h3>' + name + '</h3>' +
'<p>' + place + '</p>' +
'<p>' + 'Date of initial liscencing: ' + liscence + '</p>' +
'<p>' + 'Risk rating: ' + risk + '</p>';
producerLayer.addLayer(marker);
marker.bindPopup(content).openPopup();
}
producerLayer.addTo(map);
I have attached an image below of the problem that I'm having.
Looks like you are just missing the Leaflet.markercluster plugin CSS files, as described on the plugin docs:
[…] use files in the dist folder:
MarkerCluster.css
MarkerCluster.Default.css (not needed if you use your own iconCreateFunction instead of the default one)
leaflet.markercluster.js (or leaflet.markercluster-src.js for the non-minified version)
For example using unpkg.com CDN:
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.3.0/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.3.0/dist/MarkerCluster.Default.css">
Related
I am using Mapbox API to locate two gps locations and draw a polyline between them. The code that I have written works...sometimes.
It seems that if the two locations are physically close to each other it works more often than not, but if the two points are further away then it doesn't work more often than not, but I can't duplicate the results consistently. My working theory right now is that the polyline gets too complex for the API to decode. Is there a way to simplify a polyline or request a simpler one in the first place?
I've marked the line in the code below that is problematic. Does anyone have any ideas why it sometimes works and sometimes doesn't???
If it matters, my ultimate goal with this is generating a static map image that will be used in a report, so I'm not really worried about bandwidth or efficiency, I just need the image to work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script src="js/jquery.fileDownload.js"></script>
<script>
//Declare Variables
var token = "myuniquetoken";
var longitude;
var latitude;
var longitude2;
var latitude2;
var polyline;
//When first Get GPS Button is Pressed
$(document).ready(function() {
$("#btnGetGPS").click(function(){
var address = $("#address").val();
var addressstring = address.replace(" ", "%20");
var url = "https://api.mapbox.com/geocoding/v5/mapbox.places/" + addressstring + ".json?access_token=" + token;
var jqxhr = $.getJSON( url, function(data) {
longitude = data["features"][0]["center"][0];
latitude = data["features"][0]["center"][1];
$("#gpslong").text(longitude);
$("#gpslat").text(latitude);
var mapPinUrl = "https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-l+000(" + longitude + "," + latitude + ")/" + longitude + "," + latitude + ",14/500x300?access_token=" + token;
$('#mapDiv').html('<img id="mapImg" src=' + mapPinUrl +' />');
$('#secondlocation').show();
});
});
});
//When second Get GPS Button is Pressed
$(document).ready(function() {
$("#btnGetGPS2").click(function(){
var address2 = $("#address2").val();
var addressstring2 = address2.replace(" ", "%20");
var url2 = "https://api.mapbox.com/geocoding/v5/mapbox.places/" + addressstring2 + ".json?access_token=" + token;
var jqxhr2 = $.getJSON( url2, function(data) {
longitude2 = data["features"][0]["center"][0];
latitude2 = data["features"][0]["center"][1];
$("#gpslong2").text(longitude2);
$("#gpslat2").text(latitude2);
//Get a polyline
var polyURL = "https://api.mapbox.com/directions/v5/mapbox/driving/" + longitude + "," + latitude + ";" + longitude2 + "," + latitude2 + "?access_token=" + token;
console.log(polyURL);
var polyJSON = $.getJSON( polyURL, function(data2) {
polyline = data2["routes"][0]["geometry"];
console.log(polyline);
//////////////////The next line is the problematic one.//////////////////
var mapRoute = "https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-a+9ed4bd(" + longitude + "," + latitude + "),pin-s-b+000(" + longitude2 + "," + latitude2 + "),path-5+f44-0.5(" + polyline + ")/auto/500x300?access_token=" + token;
console.log(mapRoute);
$('#mapDiv2').html('<img id="mapImg" src=' + mapRoute +' />');
});
});
});
});
</script>
</head>
<body>
Enter an address (i.e. 1600 Pennsylvania Avenue NW, Washington, DC 20500):</br>
<input id="address"/></br>
<button id="btnGetGPS" type="button">Get GPS</button>
<div id = "gpslong"></div>
<div id = "gpslat"></div>
<div id="mapDiv"></div>
<div id="secondlocation" style="display:none">
Enter a second location:
<input id="address2"/></br>
<button id="btnGetGPS2" type="button">Get GPS</button>
<div id = "gpslong2"></div>
<div id = "gpslat2"></div>
<div id="mapDiv2"></div>
</div>
</body>
</html>
I'm leaving this question up and proving the answer that someone helped me discover in hopes of helping other people in the future.
.
The problem was that the polyline I was getting in the first API request contained special characters like `,~,|, etc. When I tried to use that same string in the second API request, those special characters were sometimes causing problems. I added the line of code below to scrub out those special characters and replace them with safe ASCII.
.
polyline = encodeURIComponent(polyline);
I'm working a map website using OpenStreetMap, and I'm using image marker rather the default one. The first problem when zooming map in or out, marker's position slightly changing... So I set anchor point using L.point. However, the chain reaction happened also to pop up, which described by this picture :
Popup covered the marker, and the positioning doesn't seem right. Any suggestion how to tinkering popup's point? Here's my code :
var locations = data;
for ( var i=0; i < locations.length; i++) {
if (locations[i][0] == 'panic') {
var icon = L.icon({iconUrl:"{{asset('assets/splash4.gif')}}", iconAnchor: new L.Point(36,41) });
var marker = L.marker( [locations[i][1], locations[i][2]], {icon: icon});
marker.bindPopup( locations[i][5] + " <br>" + locations[i][6] + " <br>" + locations[i][7] + " <br><br>" + locations[i][3] + " <br>" + locations[i][4] ).addTo( map );
if(i == locations.length - 1){
map.setView(new L.LatLng(locations[i][1], locations[i][2]), 18);
marker.bindPopup(locations[i][5] + " <br>" + locations[i][6] + " <br>" + locations[i][7] + " <br><br>" + locations[i][3] + " <br>" + locations[i][4]).openPopup().addTo( map );
}
} else {
var icon2 = L.icon({iconUrl:"{{asset('assets/opmarkerblue1.png')}}", iconAnchor: new L.Point(0,32)});
var marker = L.marker( [locations[i][1], locations[i][2]], {icon: icon2});
marker.bindPopup( locations[i][5] + " <br>" + locations[i][6] + " <br>" + locations[i][7] + " <br><br>" + locations[i][3] + " <br>" + locations[i][4] ).addTo( map );
}
}
Any help appreciated.
Use the popupAnchor option when instantiating your L.Icons. That's another L.Point with pixel coordinates relative to the iconAnchor.
The tutorial for custom marker icons also explains how the options for L.Icon work.
Alright, so I've tried and failed a number of times and dug through SE hoping to figure out my problems.
I've been basing a lot of my work off this SE post: link.
I have been unable to make this work, mainly because of two errors, but the first one being an obvious hurdle to overcome first:
Error 1:
Uncaught SyntaxError: Unexpected token <
Error 2:
Uncaught TypeError: L.markerClusterGroup.layerSupport is not a function
So, I would like clustering to work with any layer that is turned on via the L.control.layers() function.
Here is my page, as it sits now: TN Alcohol Map
And the code, sans headers/misc:
// initialize the map
var map = L.map('map').setView([36.17, -86.78], 7);
// load a tile layer/base map
L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png',
{
attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap',
maxZoom: 18,
minZoom: 7
}).addTo(map);
//attributes for basemap credit (lower right hand corner annotation)
var streetsAttr = 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap';
var aerialAttr = 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';
var artsyfartsyAttr = 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap';
//crete variables for the base map layer switcher
var streets = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png', {id: 'MapID', attribution: streetsAttr}),
aerial = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {id: 'MapID', attribution: aerialAttr}),
artsyfartsy = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {id: 'MapID', attribution: artsyfartsyAttr});
//create baseMaps variable to store basemap layer switcher
var baseMaps = {
"Streets": streets,
"Aerial": aerial,
"ArtsyFartsy": artsyfartsy
};
// BEER icon & load beer geojson
var beerIcon = L.icon({
iconUrl: 'glass.png',
iconSize: [24, 48]
});
var beerMarker = L.geoJson(false, {
pointToLayer: function(feature, latlng) {
var marker = L.marker(latlng, {
icon: beerIcon
});
//popup shows NAME, ADDRESS, URL and opens the URL in a new window/tab
marker.bindPopup("<strong>" + feature.properties.NAME + "</strong><br/>" + feature.properties.STREETNUM + " " + feature.properties.STREET + ", " + feature.properties.CITY + "<br/>" + "<a target = _blank href=" +
feature.properties.URL + ">" + feature.properties.URLDISPLAY + "</a>");
return marker;
}
}).addTo(map);
$.getJSON("breweries.geojson", function(data) {
beerMarker.addData(data);
});
// WINE icon & load wine geojson
var wineIcon = L.icon({
iconUrl: 'wine.png',
iconSize: [48, 48]
});
var wineMarker = L.geoJson(false, {
pointToLayer: function(feature, latlng) {
var marker = L.marker(latlng, {
icon: wineIcon
});
//popup shows NAME, ADDRESS, URL and opens the URL in a new window/tab
marker.bindPopup("<strong>" + feature.properties.NAME + "</strong><br/>" + feature.properties.STREETNUM + " " + feature.properties.STREET + ", " + feature.properties.CITY + "<br/>" + "<a target = _blank href=" +
feature.properties.URL + ">" + feature.properties.URLDISPLAY + "</a>");
return marker;
}
}).addTo(map);
$.getJSON("wine.geojson", function(data) {
wineMarker.addData(data);
});
//Define overlay maps (non-base layer maps)
var overlayMaps = {
"Breweries": beerMarker,
"Wineries": wineMarker
};
//Creates a Marker Cluster Group
var mcg = L.markerClusterGroup.layerSupport().addTo(map);
//Checking in the 'sub groups'
mcg.checkIn([
beerMarker,
wineMarker
]);
//baseMaps layer switcher
L.control.layers(baseMaps, overlayMaps).addTo(map);
As said by nathansnider in the question comment, the content of your leaflet.markercluster.layersupport-src file is not the JavaScript code of the markerCluster.LayerSupport plugin, but the GitHub HTML page that displays the code of that file, i.e. surrounded by plenty HTML code.
You should simply replace the content of your file by the content of the raw file here: https://raw.githubusercontent.com/ghybs/Leaflet.MarkerCluster.LayerSupport/master/leaflet.markercluster.layersupport-src.js
Demo: http://plnkr.co/edit/Jd8skZ1U0bWxgl2orJV6?p=preview
Side note:
If you just need the Layers Control to work with Leaflet.markercluster, there is another plugin that does just that and which is much simpler: Leaflet.FeatureGroup.SubGroup (230 lines of code v.s. 600 lines for Leaflet.MarkerCluster.LayerSupport as of today).
In your case you would use it this way:
// Create a normal Marker Cluster Group.
var mcg = L.markerClusterGroup().addTo(map);
// Create SubGroups.
var beerMarkerSub = L.featureGroup.subGroup(mcg).addTo(map);
var wineMarkerSub = L.featureGroup.subGroup(mcg).addTo(map);
// For Layers Control.
var overlayMaps = {
"Breweries": beerMarkerSub,
"Wineries": wineMarkerSub
};
// That is it! No need to check-in.
Code specific for your application, since you load GeoJSON data by AJAX:
var beerMarker = L.geoJson(null, beerOptions); // DO NOT add to map.
var wineMarker = L.geoJson(null, wineOptions); // Same story.
$.getJSON("breweries.geojson", function(data) {
beerMarker.addData(data); // GeoJSON conversion.
// Then transfer all features into the corresponding sub-group.
beerMarker.eachLayer(function (layer) {
layer.addTo(beerMarkerSub);
});
});
$.getJSON("wine.geojson", function(data) {
wineMarker.addData(data); // GeoJSON conversion.
// Then transfer all features into the corresponding sub-group.
wineMarker.eachLayer(function (layer) {
layer.addTo(wineMarkerSub);
});
});
Demo: http://plnkr.co/edit/x8vTLjE53TPiLd52BQ1d?p=preview
Disclosure: I am the author of these plugins.
I have two functions that load markers into my map. (Both functions are called on success of an ajax call)
First Function is like this:
function loadEpsMarkers(data) {
for (var i = 0; i < data.length; i++) {
var plateNo = data[i].PLATE_NUMBER;
var permitNo = data[i].PERMITINFOID;
var inventoryId = data[i].INVENTORY_ID;
var icon = epsiconR;
if (data[i].INVENTORY_STATUS === 'Complete') {
icon = epsiconC;
}
var popup = '<h5>EPS</h5>' + 'Plate:' + plateNo + '<br/>' +
' Permit: <a class=\'link\' data-inventoryId="' + inventoryId + '" href=' + url + '>' + permitNo + '</a>' +
'<p style=\"color:blue\">' + '' + '<a class=\'link\' href=' + url + '>' +
'Import' + '</a>' + '<br/>' + '<a class=\'link\' href=' + url + '>' +
'Duplicate' + '</a>' + '<br/>' + '<a class=\'link\' href=' + url + '>' +
'Removed' + '</a>' + '<br/>' + '</p>';
var m = L.marker([data[i].REF_LATITUDE, data[i].REF_LONGITUDE], { icon: icon, draggable: 'true' })
.bindPopup(popup);
markerClusters.addLayer(m);
}
map.addLayer(markerClusters);
map.invalidateSize(false);
}
The second Function is same except the data is different.
This works fine and I get the clustered markers as expected.
Now I have a button, when I click this button, it should hide the markers from the first call.
The easy way out is to remove layers and then redo just the second call. But that seems like an inefficient way of doing this.
This gets more complex if I have 4 such data calls and I want to toggle markers from each of those calls.
I have tried something like this as well:
$('#dvEpsOnlyMarkers').click(function () {
markerClusters.removeLayer(m);
});
But that isn't working. Any ideas on how I can make this work ?
Thanks in advance
A very simple way of achieving what you describe is to store references to markers of each group in arrays, and manipulate those arrays to add / remove the layers into MCG:
var markersCall1 = [],
markersCall2 = [],
markersCall3 = [],
markersCall4 = [];
function loadEpsMarkersX(data) { // Replace X by 1...4
for (var i = 0; i < data.length; i++) {
// Convert data...
var m = L.marker(/* latLng, options, popup... */);
markersCallX.push(m); // Replace X by 1...4
}
// Actually add to MarkerClusterGroup.
// Replace X by 1...4
markerClusters.addLayers(markersCallX); // note the addLayers with "s".
}
$('#dvEpsOnlyMarkersX').click(function (event) { // Replace X by 1...4
// Assuming it is a checkbox, you can use it to toggle.
if (this.checked) {
// Replace X by 1...4
markerClusters.addLayers(markersCallX); // note the "s".
} else {
// Replace X by 1...4
markerClusters.removeLayers(markersCallX); // note the "s".
}
});
When you have batches of markers to add / remove like in your case, you can conveniently use the MarkerClusterGroup methods addLayers and removeLayers (with a trailing s) with an array of the markers to process. These methods are much more efficient than adding / removing markers one by one.
I'm using an old version of the Slidedeck Plugin (v.1.4.5) and I have a javascript problem with one of the skins I'm using. More precisely, the horizontal slides are stitched together and I can't figure out how to fix this. I want each slide to be independent, without any content from the next or previous slide to be seen on the active slide.
You can see in the screenshot from below that the middle slide has visible content from the previous and next slide, which obviously I don't want to be visible.
I should mention that I have very limited knowledge of javascript / jQuery, and I suspect it's a js problem because the CSS is the same for all skins - the only variable is the script used by each skin.
You can see the slider behavior on this website and below is the full script used for the slider skin. I would appreciate any help on this. To change the slides click on each slide arrow from left or right side, or you can use the directional keys on the keyboard.
(function($){
SlideDeckSkin['fullwidth-sexy'] = function(slidedeck){
var ns = 'fullwidth-sexy';
var elems = {};
elems.slidedeck = $(slidedeck);
elems.frame = elems.slidedeck.closest('.skin-' + ns);
// Disable spines as this skin is not meant to function with spines on
elems.slidedeck.slidedeck().setOption('hideSpines', true);
elems.frame.append('PreviousNext');
elems.slidedeck.append('<div class="' + ns + '-mask left"></div><div class="' + ns + '-mask right"></div>');
elems.frame.find('.sd-' + ns + '-nav').bind('click', function(event){
event.preventDefault();
var $this = $(this);
elems.slidedeck.slidedeck().options.pauseAutoPlay = true;
if($this.hasClass('prev')){
elems.slidedeck.slidedeck().prev();
} else {
elems.slidedeck.slidedeck().next();
}
});
};
$(document).ready(function(){
$('.skin-fullwidth-sexy .slidedeck').each(function(){
if(typeof($.data(this, 'skin-fullwidth-sexy')) == 'undefined' || $.data(this, 'skin-fullwidth-sexy') == null){
$.data(this, 'skin-fullwidth-sexy', new SlideDeckSkin['fullwidth-sexy'](this));
}
});
});
})(jQuery);
The following might work, but it is hard to test without an example of what you are trying to do.
What I did is added a unique number to the ns variable (for namespace I assume.) This number is passed to the callback of the each function. (doc)
(function($){
SlideDeckSkin['fullwidth-sexy'] = function(slidedeck,uniqueName){
var ns = 'fullwidth-sexy'+uniqueName;
var elems = {};
elems.slidedeck = $(slidedeck);
elems.frame = elems.slidedeck.closest('.skin-' + ns);
// Disable spines as this skin is not meant to function with spines on
elems.slidedeck.slidedeck().setOption('hideSpines', true);
elems.frame.append('PreviousNext');
elems.slidedeck.append('<div class="' + ns + '-mask left"></div><div class="' + ns + '-mask right"></div>');
elems.frame.find('.sd-' + ns + '-nav').bind('click', function(event){
event.preventDefault();
var $this = $(this);
elems.slidedeck.slidedeck().options.pauseAutoPlay = true;
if($this.hasClass('prev')){
elems.slidedeck.slidedeck().prev();
} else {
elems.slidedeck.slidedeck().next();
}
});
};
$(document).ready(function(){
$('.skin-fullwidth-sexy .slidedeck').each(function(n){
if(typeof($.data(this, 'skin-fullwidth-sexy')) == 'undefined' || $.data(this, 'skin-fullwidth-sexy') == null){
$.data(this, 'skin-fullwidth-sexy', new SlideDeckSkin['fullwidth-sexy'+n](this,n));
}
});
});
})(jQuery);