Develop Reference

leaflet marker color based on value from objects inside

Writing my observing webapp and need to know quickly damaged points of my devices on my map. i am using leaflet maps. So please, give me the direction whether it`s possible to change color of marker so that it will depend on svg object inside this cluster? for example i have some devices which marked as damaged with a red color. can my map show me the green marker here as red when one of my device there is damaged? Many thanks for answers.
My map example:
<div id="map"></div>
<script type="text/javascript">
var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© OpenStreetMap contributors, Points &copy 2012 LINZ'
}),
latlng = L.latLng(-37.82, 175.24);
var map = L.map('map', {center: latlng, zoom: 13, layers: [tiles]});
var markers = L.markerClusterGroup();
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
</script>

Leaflet maxBounds unexpectedly fix map to center

I try to limit moving map out of focus but the map is fixed to centre and can't be moved.
var mapSW = [1000, 0],
mapNE = [1000, 0];
var map = L.map('map', {
crs: L.CRS.Simple,
zoomControl: true,
zoom: 1,
minZoom: 0,
maxZoom: 4
});
var bounds = [[-250,-500], [800,800]];
var image = L.imageOverlay('uqm_map_full.png', bounds).addTo(map);
map.fitBounds(bounds);
map.setMaxBounds(new L.LatLngBounds(
map.unproject(mapSW, map.getMaxZoom()),
map.unproject(mapNE, map.getMaxZoom()),
));
If I enable setmaxBounds() map's background image fix to centre and can be moved elastically. Map move, until it is dragged, after drag end map back to its centre.
I tried to follow few examples but still no success.
Do you see where I make mistake?

Your mapSW and mapNE coordinates are identical, so the LatLngBounds that you can build out of them is of null area.
Furthermore, I am not sure why you carefully build bounds for your Image Overlay (image) and to have the map fit those bounds, then using complicated unproject with different coordinates to specify to setMaxBounds?
Live example using the same bounds for setMaxBounds, enabling navigation to the same bounds as the Image Overlay:
var map = L.map('map', {
crs: L.CRS.Simple,
zoomControl: true,
zoom: 1,
minZoom: 0,
maxZoom: 4
});
var bounds = [
[-250, -500],
[800, 800]
];
var image = L.imageOverlay('https://a.tile.openstreetmap.org/0/0/0.png', bounds, {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
map.fitBounds(bounds);
/*map.setMaxBounds(new L.LatLngBounds(
map.unproject(mapSW, map.getMaxZoom()),
map.unproject(mapNE, map.getMaxZoom()),
));*/
map.setMaxBounds(bounds);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet-src.js"></script>
<div id="map" style="height: 200px"></div>
If you wish to restrict user navigation to a different area than your image's bounds, you can easily do so by building similar bounds, without having to resort to unproject at all:
var map = L.map('map', {
crs: L.CRS.Simple,
zoomControl: true,
zoom: 1,
minZoom: 0,
maxZoom: 4
});
var bounds = [
[-250, -500],
[800, 800]
];
var image = L.imageOverlay('https://a.tile.openstreetmap.org/0/0/0.png', bounds, {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
map.fitBounds(bounds);
/*map.setMaxBounds(new L.LatLngBounds(
map.unproject(mapSW, map.getMaxZoom()),
map.unproject(mapNE, map.getMaxZoom()),
));*/
map.setMaxBounds([
[-300, -600],
[900, 900]
]);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet-src.js"></script>
<div id="map" style="height: 200px"></div>

Leaflet map: how to removeLayer and add popups to the map?

I'm trying to addLayer (marker, circle and popup) to the map.
I am able to add the marker and circle successfully but I cannot add the popup and also I cannot removeLayer which result in multiplying the marker and circle...
It basically doesn't remove the previous marker and circle before adding the new one in.
This is a working FIDDLE:
https://jsfiddle.net/31ws6z37/3/
And this is my entire code:
function initializeMapAndLocator(){
var map = L.map('map_2385853');
googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);
map.locate({setView: true,
maxZoom: 16,
watch:true,
timeout: 60000
});
function onLocationFound(e) {
var radius = e.accuracy / 2;
var marker = new L.Marker(e.latlng, {draggable:true});
var circles = new L.circle(e.latlng, radius).bindPopup("You are within " + radius + " meters from this point").openPopup();;
map.removeLayer(marker);
map.removeLayer(circles);
map.addLayer(marker);
map.addLayer(circles);
}
map.on('locationfound', onLocationFound);
}
initializeMapAndLocator();
Could someone please let me know how to removeLayer and also how to add the popup to my map?
Any help would be appreciated.
EDIT:
Nothing seems to be working and I'm pulling hair out. Every corner I turned and every search indicates that I need to use the removeLayer to remove the marker but this is not the case for me and I don't understand it!!
This is another version of my code and still adds markers before removing the old one....
var map = L.map('map_2385853');
googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);
map.locate({setView: true,
maxZoom: 16,
watch:true,
timeout: 60000
});
function onLocationFound(e) {
var radius = e.accuracy / 2;
var marker;
var circles;
marker = new L.Marker(e.latlng, {draggable:true});
circles = new L.circle(e.latlng, radius);
//var pop = new bindPopup("You are within " + radius + " meters from this point").openPopup();
map.eachLayer(function (layer) {
map.removeLayer(marker);
map.removeLayer(circles);
});
map.addLayer(marker);
map.addLayer(circles);
}
map.on('locationfound', onLocationFound);
I'm sure I'm doing something wrong but I just don't know where and how!
Any help would be great.

The problem is that you a mixing the wrong stuff together. It would be easier for you to learn the basics creating a leaflet map. In your first snippet you first initialize the marker, then remove it and the you add it to your map. That make no sense and isn't logical. Ask in the onLocationFound() function if the marker and circles layers are on the map. If true then remove it:
var marker;
var circles;
function onLocationFound(e) {
var radius = e.accuracy / 2;
if(map.hasLayer(circles) && map.hasLayer(marker)) {
map.removeLayer(circles);
map.removeLayer(marker);
}
marker = new L.Marker(e.latlng, {draggable:true});
circles = new L.circle(e.latlng, radius);
circles.bindPopup("You are within " + radius + " meters from this point").openPopup();
map.addLayer(marker);
map.addLayer(circles);
}
Here is a the modified FIDDLE. Hope it helps
greez Manuel

Google Maps with satellite base Map and imageMapType overlay increase zoom

I am displaying an ImageMapType as overlay over a satellite mapType base map.
The base map seems to be limiting the max zoom to 19 in my area, if I change to a Road mapType I get a a couple of more levels. I have high resolution imaginery which I am displaying in the overlay and I want to be able to zoom further. If I use the ImageMapType as base map I can zoom in all I need, but I would really like to display the satellite base map and then continue to zoom into the image even if there's no satellite imaginery available.
Is there any way of accomplishing this? The only thing I can think of is creating a custom base map.
Code is similar to this example https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay
Thanks!
My code:
var mapMinZoom = 10;
var mapMaxZoom = 25;
var zoom = 20;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-34.567426059726316, -60.34467143006623),
zoom: zoom,
mapTypeId: google.maps.MapTypeId.SATELLITE,
panControl: false,
streetViewControl: false,
maxZoom: mapMaxZoom
});
createImageLayer('imaginery', 'images')
}
function createImageLayer(key, folder) {
var mapBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-34.55771388565057, -60.367219001054764), new google.maps.LatLng(-34.55817334541287, -60.3209562599659));
var imageMapTypeLayer = new google.maps.ImageMapType({
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
name: key,
getTileUrl: function(coord, zoom) {
if ((zoom < mapMinZoom) || (zoom > mapMaxZoom)) {
return "http://www.maptiler.org/img/none.png";
}
var ymax = 1 << zoom;
var y = ymax - coord.y -1;
var tileBounds = new google.maps.LatLngBounds(
map.getProjection().fromPointToLatLng( new google.maps.Point( (coord.x), (coord.y) ) ),
map.getProjection().fromPointToLatLng( new google.maps.Point( (coord.x), (coord.y)))
);
// write a real condition here, so long this is always valid
if (tileBounds.intersects(tileBounds)) {
return "/static/ui/"+ folder + "/"+zoom+"/"+coord.x+"/"+y+".png";
} else {
return "http://www.maptiler.org/img/none.png";
}
},
tileSize: new google.maps.Size(256, 256)
});
map.overlayMapTypes.push(imageMapTypeLayer)
}
EDIT 1:
Up to now I have managed to overcome this by listening to the zoom_changed event and changing the base map to my imageMapType when the zoom reaches the maximum and back to satellite when the user zooms out. I wonder if there's a cleaner solution to this issue.

Not repeating markers in google maps API V3 (JS)

is it possible to not let the markers repeat horizontally, since I only want the marker to be show on the map, and I am not repeating my map.
As you can see here, it is very anoying:
http://lsres.com/playerdb/test2.php
I currently initialize my map this way:
var map;
var mapTypeOptions = {
getTileUrl: function(coord, zoom) { if (coord.y < 0 || coord.y >= 1 << zoom || coord.x < 0 || coord.x >= 1 << zoom){ return "sam/map/samap_a.jpg"; } return "sam/map/samap_"+zoom+"_"+coord.x+"_"+coord.y+".jpg"; },
tileSize: new google.maps.Size(256, 256),
maxZoom: 2,
minZoom: 1,
name: "Map",
opacity: 1.0,
isPng: false,
alt: "Map"
};
var satTypeOptions = {
getTileUrl: function(coord, zoom) { if (coord.y < 0 || coord.y >= 1 << zoom || coord.x < 0 || coord.x >= 1 << zoom){ return "sam/map/samap_a.jpg"; } return "sam/sat/samap_"+zoom+"_"+coord.x+"_"+coord.y+".jpg"; },
tileSize: new google.maps.Size(256, 256),
maxZoom: 2,
minZoom: 1,
name: "Satelite"
};
var mapMapType = new google.maps.ImageMapType(mapTypeOptions);
var satMapType = new google.maps.ImageMapType(satTypeOptions);
function initialize() {
var myLatlng = new google.maps.LatLng(0, 0);
var myOptions = {
center: myLatlng,
zoom: 1,
streetViewControl: false,
panControl: false,
zoomControl: false,
scaleControl: false,
mapTypeControlOptions: {
mapTypeIds: ["map", "sat"]
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.mapTypes.set('map', mapMapType);
map.mapTypes.set('sat', satMapType);
map.setMapTypeId('map');
}
Thanks in advance!

When creating marker object, set optimized to false, for example:
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!',
optimized: false
});

It's because at zoom levels 1 and 2, the map has to repeat to not have blank space. The same thing happens at maps.google.com. What you can do is use zoom level 3 and 4 instead. You'll have to change your code so that the content contains more blank blue filler, but the map will no longer repeat. And the map details will still look good. Does that make sense?

There's one technique that could help, it's from this website, "Range Limiting"
http://econym.org.uk/gmap/range.htm
It's in V2, so I put together a V3 jsfiddle here.
http://jsfiddle.net/44e6y/1/
You'll see the map will not display too far away from the initial point. That is, you cannot drag the map beyond predefined limits.
However, you'll have to shrink the viewable area if you choose this method (it does nothing to the repeating markers).