I am using bindpopups to show a popup on a marker. This is a poc for showing markers on the map which has 2 markers at present but it seems like it fires only on one marker and not the second one. Whats wrong with the code?
<html style='height: 100%; width: 100%;'>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="src/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" href="leaflet.css" />
<link rel="stylesheet" href="src/L.Control.Sidebar.css" />
<style>
body {
padding: 30px;
font-family: sans-serif;
}
#map {
width: 100%;
height: 600px;
border-radius: 10px;
}
#sidebar {
padding: 24px;
height: auto;
width: auto;
float: right;
font-family: monospace;
}
</style>
</head>
<body>
<div id="sidebar">
<span style="font-weight: bold;">Filter</span><br>
<input backgroundColor="red" type="radio" name="filter" value="schedule" > Schedule<br>
<input type="radio" name="filter" value="risk"> Risk<br>
<input type="radio" name="filter" value="opm"> OPM<br>
<input type="radio" name="filter" value="location"> Location<br>
<input type="radio" name="filter" value="all" checked> All<br>
</div>
<div id="map"></div>
<script src="leaflet.js"></script>
<script src="src/L.Control.Sidebar.js"></script>
<script>
$(document).ready(function() {
$('input[type="radio"]').change(function(){
//alert(this.value);
});
});
var map;
var poiData = [{
"id" : "142065",
"color": "green",
"address" : "5 Rue de l'Arcade, 11400 Castelnaudary, France",
"description" : "",
"lat" : "51.47344681882283",
"lon" : "-0.29162660006234",
"name" : "Le Petit ",
"zoom_show" : "2",
"recommended" : true
}, {
"id" : "15555",
"color": "blue",
"address" : "5 Rue de l'Arcade, 11400 Castelnaudary, France",
"description" : "",
"lat" : "51.47344681882283",
"lon" : "-0.3091066283535285",
"name" : "Le Petit Gazouilli",
"zoom_show" : "2"
}];
window.onresize = function() {
Ti.API.info('********** RESIZE FUNCTION IS CALLED1!!!!! window.innerHeight' + window.innerHeight + ' //// document.body.clientHeight = ' + document.body.clientHeight);
// outputs window.innerheight =
document.getElementById("map").style.height = window.innerHeight + 'px';
// maybe change this to html/body tag to let it be a more generic fix.
map.invalidateSize();
// relevant to your leaflet map to trigger resizing / redrawing /filling.
};
var path = "",
obj = "",
center = "",
bounds = "",
minZoomLevel = "",
maxZoomLevel = "";
/*
Ti.App.addEventListener("app:startWebview", function(e) {
obj = JSON.parse(e.pois);
center = JSON.parse(e.center);
minZoomLevel = JSON.parse(e.minZoomLevel);
maxZoomLevel = JSON.parse(e.maxZoomLevel);
bounds = JSON.parse(e.bounds);
createMap();
});*/
obj = poiData;
center = [51.478744, -0.295573];
minZoomLevel = 16;
maxZoomLevel = 18;
//bounds = [[51.470103, -0.310407], [51.478376, -0.280567]];
bounds = [[51.470103, -0.310407], [51.486674, -0.286572]]; //sw,ne
createMap();
function createMap() {
//alert('2s');
var points = obj;
map = L.map('map', {
//center : [51.47834563230677, -0.29832356080899747],
//layers: [tileLayer['Gray'], groupA, groupB],
center : center,
zoom : minZoomLevel,
zoomControl : true
});
var tl = L.tileLayer('mapTiles/richmond/{z}_{x}_{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ', {
minZoom : minZoomLevel,
maxZoom : maxZoomLevel,
bounds : bounds,
//maxNativeZoom : 14,
unloadInvisibleTiles : true,
id : 'mapbox.streets'
}).addTo(map);
map.setMaxBounds(bounds);
var sidebar = L.control.sidebar('sidebar', {
closeButton: false,
position: 'right'
});
map.addControl(sidebar);
sidebar.show();
setTimeout(function () {
sidebar.show();
}, 500);
tl.on("load",function() {
//alert("all visible tiles have been loaded");
});
var poiLayer,
indicatorMarker;
var indicatorIcon = L.icon({
iconUrl : "images/gps_indicator_med.png",
iconRetinaUrl : "images/gps_indicator_med.png",
iconSize : [140, 140],
iconAnchor : [70, 70]
});
indicatorMarker = L.marker([0, 0], {
icon : indicatorIcon,
zIndexOffset : 0,
clickable : false
}).addTo(map);
/*
function showPoi(item, zoom) {
if (item.base) {
return true;
}
if (item.zoom_show == "1.0") {
return true;
}
if (item.zoom_show == "2.0" && zoom >= 16) {
return true;
}
if (zoom >= 14) {
return true;
} else {
return false;
}
}
*/
function onClick(e) {
alert('clicked a poi! ');
//Ti.API.info("click " + JSON.stringify(e.target.options.item));
// if (e && e.target && e.target.options && e.target.options.item) {
// alert('clicked a poi!');
// Ti.App.fireEvent("app:openPoi", {
// poiItem : JSON.stringify(e.target.options.item)
// });
// }
}
var zoomFactor = 0.8;
function addPois(zoom) {
var poiArray = [];
if (poiLayer) {
poiLayer.clearLayers();
}
for (var i = 0,
j = points.length; i < j; i++) {
var item = points[i];
// if (showPoi(item, zoom)) {
// var w = 50;
//var h = 60;
var w = 28;
var h = 42;
if (currentZoom === 16) {
w = w * zoomFactor;
h = h * zoomFactor;
}
/*
var icon = "",
iconHtml = "";
if (item.recommended) {
icon = "rec_tapped_poi";
}
if (item.favourited) {
icon = "fav_tapped_poi";
}
if (icon) {
iconHtml = '<img style="width:15px;height:15px;position:absolute;left:50%;margin-left:-7px;top:-6px" src="images/' + icon + '.png">';
}
*/
var pinIcon = "";
if (item.color == "blue") {
pinIcon = "mapMarkerBlue";
}
if (item.color == "green") {
pinIcon = "mapMarkerGreen";
}
if (item.color == "purple") {
pinIcon = "mapMarkerPurple";
}
var myIcon = L.divIcon({
iconSize : [w, h],
iconAnchor : [(w / 2), h],
className : "testclass",
html : '<img style="width:' + w + 'px;height:' + h + 'px" src="images/poi_icons/' + pinIcon + '.png">'
});
/*
poiArray.push(L.marker([item.lat, item.lon], {
icon : myIcon,
item : item,
zIndexOffset : 2000
}).on("click", onClick));
// }
*/
poiArray.push(L.marker([item.lat, item.lon], {
icon : myIcon,
item : item
}).bindPopup("<b>Hello world!</b><br>I am a popup."));
};
poiLayer = L.layerGroup(poiArray);
poiLayer.addTo(map);
}
addPois(currentZoom);
//var currentZoom = 12;
var currentZoom = 16;
map.on('zoomend', function(e) {
var z = map.getZoom();
if (currentZoom != z) {
currentZoom = z;
addPois(z);
}
});
function updateIndicator(e) {
indicatorMarker.setLatLng([e.lat, e.lon]);
indicatorMarker.setIcon(L.icon({
iconUrl : "images/gps_indicator_" + 'med' + ".png",
iconRetinaUrl : "images/gps_indicator_" + 'med' + ".png",
iconSize : [140, 140],
iconAnchor : [70, 70]
}));
}
Ti.App.addEventListener("app:setCurrentPos", function(e) {
if (e) {
updateIndicator(e);
}
});
Ti.App.addEventListener("app:addPoints", function(e) {
if (e.points) {
Ti.API.info(e.points);
points = e.points;
addPois(currentZoom);
}
});
}
</script>
</body>
</html>
Best Answer
Leaflet doesn`t allow to open more than one popup at same time. You need to override L.Map like this:
But be careful with this trick, because you may make your map too messy with popups.