I'm using Mapbox for a Phonegap app and making use of the Marker Cluster plugin to cluster our pins. Customizing the icon for a marker is easy enough, but I'd also like to be able to customize the cluster icon. I'm not seeing a way to customize the cluster icon. Suggestions?
Here's a snippet of what I have so far:
var map = L.mapbox.map('mapView', 'myMap.mapCode', { zoomControl: false }).setView([geoData.lat, geoData.lon], 5),
markers = new L.MarkerClusterGroup();
var propertyCount = properties.length;
for (var i = 0; i < propertyCount; i++) {
var property = properties[i];
var marker = L.marker(new L.LatLng(property.lat, property.lon), {
icon: markerIcon,
title: property.heading
});
marker.bindPopup(property.heading);
markers.addLayer(marker);
}
map.addLayer(markers);
You can define the marker like so:
var cluster = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
}
});
which will allow you to style it however you wish.
Related
I have managed to integrate mapquest within my leaflet maps which was initially showing markers on the map. Below is an example with markers showing photographs taking during a trip in Namibia.
https://www.paulgodard.com/map?c=2108_DesolationValley&p=travel&m=images
Terms
Blog
Routes between marquers with gps coordinates
1 post / 0 new
Quick reply
Thu, 08/19/2021 - 06:10
#1
Paul Godard
Routes between marquers with gps coordinates
I have managed to integrate mapquest within my leaflet maps which was initially showing markers on the map. Below is an example with markers showing photographs taking during a trip in Namibia.
https://www.paulgodard.com/map?c=2108_DesolationValley&p=travel&m=images
I already have an array of locations and I would like to display the routes in between each marker. What is the best way to do this?
window.mapData = #json($mapData);
window.onload = function() {
L.mapquest.key = 'mykey';
var map = L.mapquest.map('mapOSM', {
center: [0,0],
layers: L.mapquest.tileLayer('map'),
zoom: 10
});
map.addControl(L.mapquest.control());
var mainIcon = L.Icon.extend({ options: {
iconSize: [24,24],
iconAnchor: [12,24], // half of x | full y
popupAnchor: [0,-12] // x = 0 | - half y
}});
var oms = new OverlappingMarkerSpiderfier(map);
var bounds = new L.LatLngBounds();
for (var i = 0; i < window.mapData.length; i ++) {
var datum = window.mapData[i];
var loc = new L.LatLng(datum.lat, datum.lon);
bounds.extend(loc);
var mapIconURL = '/public/assets/icons/' + datum.icon;
mapIconURL = mapIconURL.replace(/\s+/g,'');
var marker = new L.Marker(loc, { icon: new mainIcon({iconUrl: mapIconURL}) });
marker.desc = datum.popup; //JSON.parse(datum.popup);
//if ($i=0) { alert(datum.popup); }
map.addLayer(marker);
oms.addMarker(marker);
}
if (window.mapData.length > 0) {
map.fitBounds(bounds);
} else {
map.center(window.mapData[0].lat,window.mapData[0].lon);
map.zoom(1);
}
var popup = new L.Popup({closeButton: false, offset: new L.Point(0.5, -24)});
oms.addListener('click', function(marker) {
popup.setContent(marker.desc);
popup.setLatLng(marker.getLatLng());
map.openPopup(popup);
});
oms.addListener('spiderfy', function(markers) { map.closePopup(); });
oms.addListener('unspiderfy', function(markers) { });
}
You can start with the Leaflet Routing Plugin here: https://developer.mapquest.com/documentation/leaflet-plugins/routing/
Routing in Namibia might get iffy though.
I am using leaflet and routing.control to show a route. I have it working fine, but I would like one of the markers to move with the users location using watch.position. But for now I a just trying to move the marker when I click a button. Again this works fine but when the marker moves I would like the route to update automatically. Its possible if you drag the marker so surely its possible when marker is moved in a different way? I can it if I remove the control and add a new one but this flickers too much. Any advice?
The code for the routing.control is
myroute = L.Routing.control({
waypoints: [
L.latLng(window.my_lat, window.my_lng),
L.latLng(window.job_p_lat, window.job_p_lng)
],show: true, units: 'imperial',
router: L.Routing.mapbox('API KEY HERE'),
createMarker: function(i, wp, nWps) {
if (i === 0 || i === nWps + 1) {
return mymarker = L.marker(wp.latLng, {
icon: redIcon
});
} else {
return job_start = L.marker(wp.latLng, {
icon: greenIcon
});
}
}
}).addTo(map);
and the code for moving the marker is
function movemarker() {
var lat = "52.410490";
var lng = "-1.575950";
var newLatLng = new L.LatLng(lat, lng);
mymarker.setLatLng(newLatLng);
// I assume I call something here?
}
Sorted, I did it with this, which removes first point and replaces it with new data
myroutewithout.spliceWaypoints(0, 1, newLatLng);
I build a simple js app:
var markers = L.markerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: false,
zoomToBoundsOnClick: true,
removeOutsideVisibleBounds:true
});
for (var i = 0; i < randomGeoPoints.length; i++) {
var a = randomGeoPoints[i];
var title = "pippo";
var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title,icon:lightIcon });
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
With these two
and a demo
When I exit full screen mode my cluster points layer disappears. But when I return the layer is there.
I'm using Safari desktop browser, in Safari mobile (iPad) it does not happen.
I test with no cluster but with simple points layer and it's OK.
The Plunker demo instead works.
Are there any bugs about this ?
I've an issue with the leaflet openPopup method.
showMap = function(elements) {
var jsonp = 'http://a.tiles.mapbox.com/v3/blahblahblah.jsonp';
var m = new L.Map("my_map").setView(new L.LatLng(51.5, -0.09), 15);
var geojsonLayer = new L.GeoJSON();
var PlaceIcon = L.Icon.extend({
iconSize: new L.Point(25, 41),
shadowSize: new L.Point(40, 35),
popupAnchor: new L.Point(0, -30)
});
var icon = new PlaceIcon(__HOME__ + '/images/leaflet/marker.png');
var marker;
for (var i = 0; i < elements.length; i++) {
var address = $("<div/>").html(elements[i].address).text();
var latlng = new L.LatLng(elements[i].latitude, elements[i].longitude);
marker = new L.Marker(latlng, {icon: icon}).bindPopup(address);
if (i == 0) {
marker.openPopup();
}
m.addLayer(geojsonLayer).addLayer(marker);
}
// Get metadata about the map from MapBox
wax.tilejson(jsonp, function(tilejson) {
m.addLayer(new wax.leaf.connector(tilejson));
});
}
When I click on a marker I have the popup open. But I would like to have the first popup open when the map is loaded. (and open other popups on markers click)
AnNy ideas ?
Put openPopup call after you add the marker to the map and you should be fine.
I'm assuming that when you click on a marker you see the popup but you're not getting the popup of the first marker to show automatically when the map is loaded?
First, it doesn't look like you're actually using GeoJSON so a GeoJSON layer isn't necessary (you can just use a FeatureLayer) but that shouldn't cause any issues. Whatever layer group you use you should only be adding it to the map once and then adding all child layers to the LayerGroup. You're currently adding the geojsonLayer multiple times in your "for" loop which you don't want to do.
Second, you have to call marker.openPopup() after the marker is added to the map.
Try changing your code around to looks something like this:
var layerGroup = new L.FeatureGroup();
layerGroup.addTo( m );
for (var i = 0; i < elements.length; i++) {
var address = $("<div/>").html(elements[i].address).text();
var latlng = new L.LatLng(elements[i].latitude, elements[i].longitude);
marker = new L.Marker(latlng, {icon: icon}).bindPopup(address);
//You don't add the marker directly to the map. The layerGroup has already
//been added to the map so it will take care of adding the marker to the map
layerGroup.addLayer( marker );
if (i == 0) {
marker.openPopup();
}
}
I had this issue and fixed it with adding a timeout right after I added the marker on the map.
marker.addTo(this.map).bindPopup('Info');
setTimeout(() => {
marker.openPopup();
}, 500);
I don't know why but on some page, I need to apply timeout. In any case it's my workaround, hope this works for some of you too.
First add your map then put openPopup():
L.marker([lat, long]).bindPopup('Your message').addTo(map).openPopup();
I can't seem to get the my map markers to display when I use an image sprite on the iphone. They appear when I use the standard google map markers on iphone and when viewing the site in the desktop the sprite icons work fine.
Here is the code I use to create the markers, I am using Zepto but JQuery could as easily apply.
$.ajax({
dataType: 'jsonp',
url: myLocations.LocatorUrl,
timeout: 8000,
success: function(data) {
var infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
$.each(data, function(index, item){
var data = item, pincolor,
latLng = new google.maps.LatLng(data.lat, data.lng);
var d = 'http://blah';
var pinImage = new google.maps.MarkerImage(d+"/assets/img/sprite.locator.png",
new google.maps.Size(24, 36),
new google.maps.Point(0,25),
new google.maps.Point(10, 34));
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.type,
icon: pinImage
});
bounds.extend(latLng); // Extend the Latlng bound method
var bubbleHtml = '<div class="bubble"><h2>'+item.type+'</h2><p>'+item.address+'</p></div>'; // Custom HTML for the bubble
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(bubbleHtml);
infoWindow.open(map, marker);
});
markers.push(marker); // Push markers into an array so they can be removed
})(marker, data);
});
map.fitBounds(bounds); // Center based on values added to bounds
}, error: function(x, t, m) {
console.log('errors')
if(t==="timeout") {
alert("got timeout");
} else {
alert(t);
}
}
});
Got it. Turns out the images I was referencing were on localhost, when I swapped this to the actual IP address of my local machine it worked.