How to apply leaflet marker cluster using layers - javascript

I´m trying to apply the Leaflet.MarkerCluster.LayerSupport. But I don´t know how to use it :( I´ve already read the documentation about but and I tried many times but it doesen´t work.
This is my code
<!DOCTYPE html>
<html>
<head>
<title>Península</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<script src="leaflet.markercluster.layersupport-src.js"></script>
<script>
var NemachIcons =L.Icon.extend({
options:{
shadowUrl:'',
iconSize: [50,55],
iconAnchor: [45,45],
popupAnchor:[-3,-76]
}
});
var tiloIcon = new NemachIcons({iconUrl:'http://www.iconshock.com/img_jpg/SIGMA/general/jpg/256/pyramid_icon.jpg'}),
puebloIcon = new NemachIcons({iconUrl:'http://icons.iconseeker.com/png/fullsize/gant/pointless-bw-circle-i-use-it-iex.png'}),
gasIcon =new NemachIcons({iconUrl:'https://cdn2.iconfinder.com/data/icons/function_icon_set/circle_green.png'});
L.icon =function (options) {
return new L.Icon(options);
};
var sitios = new L. LayerGroup();
L.marker([20.683, -88.568], {icon: tiloIcon}).bindPopup('1').addTo(sitios),
L.marker([21.204547, -89.269466], {icon: tiloIcon}).bindPopup('2').addTo(sitios),
L.marker([20.332362, -89.647899], {icon: tiloIcon}).bindPopup('3').addTo(sitios),
L.marker([20.486417, -88.660218], {icon: tiloIcon}).bindPopup('4').addTo(sitios),
L.marker([21.151196, -87.958143], {icon: tiloIcon}).bindPopup('5').addTo(sitios);
var pueblo = new L.LayerGroup();
L.marker([20.9330, -89.0178], {icon: puebloIcon}).bindPopup('6').addTo(pueblo),
L.marker([20.6909, -88.2015], {icon: puebloIcon}).bindPopup('7').addTo(pueblo);
var gas = new L.LayerGroup();
L.marker([20.973907, -89.578931], {icon: gasIcon}).bindPopup('8').addTo(gas);
var mbAttr = ' ' +
'' +
'',
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';
var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr});
var map = L.map('map', {
center: [20.794527, -88.760612],
zoom: 8,
layers: [grayscale, sitios]
});
var baseLayers = {
//"Grayscale": grayscale,
//"Streets": streets
};
var overlays = {
"Pirámide": sitios,
"Poblado": pueblo,
"Servicio": gas
};
L.control.layers(baseLayers, overlays).addTo(map);
</script>
</body>
</html>
I´ll appreciate all your answers

Like for Leaflet.markercluster, you have to create a Marker Cluster Group where your sub-groups will go into.
In the case of Layer Support, you create a Marker Cluster Group with Layer Support instead:
var mcg = L.markerClusterGroup.layerSupport().addTo(map);
Then you "check in" the sub-groups, so that they know they have to go into that clustering group rather than directly to the map, when they are selected through the Layers Control:
mcg.checkIn([
sitios,
pueblo,
gas
]);
Demo: http://plnkr.co/edit/CT3E63AKWze34FqUoiHn?p=preview
Note: you should download the JavaScript file leaflet.markercluster.layersupport-src.js, if not already done, and place it next to your HTML page, so that it can refer to it locally.
Note 2: if your usage requires only compatibility of clustering with L.Control.Layers, you might be interested in this more simple plugin: Leaflet.FeatureGroup.SubGroup.
Disclaimer: I am the author of these plugins.

Related

OpenLayers map.addLayer TypeError

I'm trying to do some simple drawing on OpenStreetMap data using OpenLayers (version 6.5.0). The map loads fine. I try to do the drawing when the button in the top right is clicked.
I convert this array of GPS coordinates into a Polygon, into a Feature, into an ol.source.Vector, into an ol.layer.Vector. I log every object constructed along the way on the console. This appears to go fine.
I finally want to add the (Vector) layer to the existing map using the .addLayer() function.
At this point, things go wrong inside the OpenLayer 6.5.0 JavaScript code. Deep inside the ol.js code, it throws a TypeError: t.addEventListener is not a function.
Browser screenshot
I've looked at multiple examples:
https://openlayers.org/en/latest/examples/polygon-styles.html
https://openlayers.org/en/latest/examples/geojson.html
So far, I have no clue whether this a bug in OpenLayer 6.5.0 or I'm missing something during conversion of my GPS coordinates array into an ol.layer.vector object. Any hints on this?
Entire html/javascript code below:
<meta charset="UTF-8">
<html>
<head>
<title>OSM test</title>
<link rel="stylesheet" href="ol.css">
<script src="ol.js"></script>
<script type="text/javascript">
function loadMap(domDivId, szLat, szLon, zoom) {
var vView = new ol.View({
center: ol.proj.fromLonLat([szLon, szLat]),
zoom: zoom
});
var lTile = new ol.layer.Tile({
source: new ol.source.OSM()
})
var map = new ol.Map({
target: domDivId,
layers: [lTile],
view: vView
});
return map;
}
function drawBermuda(map) {
// Bermuda triangle (approximate) GPS coordinates in [lat,lon] format
var arPath = [
[18.472282,-66.123934], // Bermuda
[32.297504,-64.778447], // Puerto Rico
[25.732447,-80.133221], // Miami
[18.472282,-66.123934] // Bermuda
];
console.log(arPath);
var pPath = {
'type': 'Polygon',
'coordinates': arPath
};
console.log(pPath);
var fPath = {
'type': 'Feature',
'geometry': pPath
};
console.log(fPath);
var svPath = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(fPath)
});
console.log(svPath);
var lvPath = new ol.layer.Vector({
source: svPath,
});
console.log(lvPath);
map.addLayer([lvPath]);
}
</script>
</head>
<body>
<div id="div_map" style="width:100%; height:100%; position:absolute; left:0px; top:0px; margin:0px; padding;0px; z-index:-10"></div>
<script>
map = loadMap('div_map', 25.0, -71.0, 5);
</script>
<div style="float:right">
<button onclick="drawBermuda(map);" style="height:100;width:100px;">click me please :-)</button>
</div>
</body>
</html>
P.S. I am aware that I still may have to swap latitude and longitude and convert the coordinates in some other way for OpenLayer to interpret them correctly. But that's not the main point here. I guess...
As well as missing and misplaced [ ] geojson coordinates must be specified in lon, lat order and features must be read into the view projection
<meta charset="UTF-8">
<html>
<head>
<title>OSM test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.5.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.5.0/build/ol.js"></script>
<script type="text/javascript">
function loadMap(domDivId, szLat, szLon, zoom) {
var vView = new ol.View({
center: ol.proj.fromLonLat([szLon, szLat]),
zoom: zoom
});
var lTile = new ol.layer.Tile({
source: new ol.source.OSM()
})
var map = new ol.Map({
target: domDivId,
layers: [lTile],
view: vView
});
return map;
}
function drawBermuda(map) {
// Bermuda triangle (approximate) GPS coordinates in [lon,lat] format
var arPath = [[
[-66.123934, 18.472282], // Bermuda
[-64.778447, 32.297504], // Puerto Rico
[-80.133221, 25.732447], // Miami
[-66.123934, 18.472282] // Bermuda
]];
var pPath = {
'type': 'Polygon',
'coordinates': arPath
};
var fPath = {
'type': 'Feature',
'geometry': pPath
};
var svPath = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(fPath, {featureProjection: map.getView().getProjection()})
});
var lvPath = new ol.layer.Vector({
source: svPath,
});
map.addLayer(lvPath);
}
</script>
</head>
<body>
<div id="div_map" style="width:100%; height:100%; position:absolute; left:0px; top:0px; margin:0px; padding;0px; z-index:-10"></div>
<script>
map = loadMap('div_map', 25.0, -71.0, 5);
</script>
<div style="float:right">
<button onclick="drawBermuda(map);" style="height:100;width:100px;">click me please :-)</button>
</div>
</body>
</html>

Generate PDF from HTML with Map (exactly a screenshot)

Hi I have this html with some content and a map, using Leaflet api for map rendering (jsfiddle) This whole content is part of a modal panel which open on a button click after user input some data. I want to export all content into a pdf with some client side solution.
I have tried jspdf like but it does not works. tried combination of canvastohtml and jspdf like but could not able to make it work either. Point to mentione here is my content contains map which export jspdf doesn't support
Anyone knows a solution, please share. I have included the code below
PS: Using phamtomjs screenshot utilities is not an option
<script src="https://npmcdn.com/leaflet#1.0.0-rc.3/dist/leaflet.js"></script>
<link href="https://npmcdn.com/leaflet#1.0.0-rc.3/dist/leaflet.css" rel="stylesheet" />
<body>
<script>
function createMap(mapPlaceHolderId) {
var OSM_MAP_TILE_SERVER_URL = 'http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png';
var DEFAULT_MAP_CENTER = L.latLng(25.296854389343867, 51.48811340332031);
var DEFAULT_MAP_ZOOM = 12;
var MAP_ZOOM_MAX = 19;
var MAP_ZOOM_SEARCH = 17;
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {
minZoom: 8,
maxZoom: 12,
attribution: osmAttrib
});
var map = L.map(mapPlaceHolderId).setView([51.505, -0.09], 13);
map.addLayer(osm);
return map;
}
</script>
<div id="vrSubReportContainer">
<div class="mapPopupTableContainer">
<div class="mapPopupTableData"><b>Plate Number:</b> 009-001GL-297286, <b>Driver Name:</b> Unknown driver
<br><b>Latitude,Longitude</b>: 25.215238,51.605439</div>
</div>
<div id="mapContainer" class="map-container">
<div class="map" id="fd_map_canvas"></div>
</div>
</div>
<script>
(function() {
createMap('fd_map_canvas');
})();
</script>
</body>

How to draw polygon in HERE Map from polygon data stored in mysql

I have a polygon data stored in mysql column "poligon" with structure like this
(lat, long)(lat,long)...
'(-6.811408423530006, 110.85068956017494)(-6.811770629167109,
110.85174098610878)(-6.81129656585151, 110.85196629166603)(-6.810718634097109, 110.85200116038322)(-6.8106946645623, 110.85195824503899)(-6.811046217619413, 110.85130110383034)'
how to enter this data to polygon code HERE Map Js API bellow
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css"href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 400px; background: grey" />
<script type="text/javascript" charset="UTF-8" >
/**
* Adds a polygon to the map
*
* #param {H.Map} map A HERE Map instance within the application
*/
function addPolygonToMap(map) {
var geoStrip = new H.geo.Strip(
[52, 13, 100, 48, 2, 100, 48, 16, 100, 52, 13, 100], 'values lat lng alt'
);
map.addObject(
new H.map.Polygon(geoStrip, {
style: {
fillColor: '#FFFFCC',
strokeColor: '#829',
lineWidth: 8
}
})
);
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: true,
useHTTPS: true
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map,{
center: {lat:52, lng:5},
zoom: 5
});
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
addPolygonToMap(map);
</script>
</body>
</html>
how to replace this data bellow with my polygon data structure (lat, long)(lat, long)...
new H.geo.Strip(
[52, 13, 100, 48, 2, 100, 48, 16, 100, 52, 13, 100], 'values lat lng alt'
);
sorry i'm newbie
Assuming you are retrieving the data for the polygon as a string on the javascript side, you should be able to use simple String manipulation.
var latLonString="(-6.811408423530006, 110.85068956017494)(-6.811770629167109, 110.85174098610878)(-6.81129656585151, 110.85196629166603)(-6.810718634097109, 110.85200116038322)(-6.8106946645623, 110.85195824503899)(-6.811046217619413, 110.85130110383034)";
//to remove first '(' and last ')'
latLonString=latLonString.substring(1,latLonString.length -2);
// get individual coordinates
var latLonValues=latLonString.split("\)\(");
var finalArray=[];
for(i=0;i<latLonValues.length;i++){
var latLonSperated=latLonValues[i].split(",");
finalArray.push(parseFloat(latLonSperated[0]));
finalArray.push(parseFloat(latLonSperated[1]));
// no altitude
finalArray.push(0);
}
var polystrip1 = new H.geo.Strip(finalArray);
var polygon1 = new H.map.Polygon(polystrip1);
map.addObject(polygon1);

Issue calling Google API in Liferay

I have problem with the execution of the javascript inside a jsp page.
I have the following page which works perfectly if I call it from my filesystem, that is, I write in the address bar C:\...\heatmap2.jsp.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Energy Heatmap </title>
<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 80% }
h1 { position:absolute; }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true?key=AIzaSyCzoFE1ddY9Ofv0jjOvA3yYdgzV4JvCNl4"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>
/*Array in cui saranno inseriti i punti da visualizzare nella mappa
*/
var heatMapData = new Array();
function loadHeatMapData(callback)
{
$.ajax
({
type: "GET",
url: "http://localhost:8080/EnergyManagement-portlet/api/secure/jsonws/sample/get-samples-time-by-name?energyName=EnAssGS",
dataType: "jsonp",
crossDomain: true,
cache: false,
success: function(jsonData)
{
for (var i = 0; i < jsonData.length; i++)
{
var decodedData = JSON.parse(jsonData[i]);
var lng = decodedData["_longitude"];
var lat = decodedData["_latitude"];
var energyIntensity = decodedData["_value"];
heatMapData.push({location: new google.maps.LatLng(lat, lng), weight: energyIntensity});
}
return callback(heatMapData);
}
})
}
function drawHeatMap()
{
// map center
var myLatlng = new google.maps.LatLng(40.8333333, 14.25);
// map options,
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
// standard map
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var heatMap = new google.maps.visualization.HeatmapLayer({
data: heatMapData,
dissipating: false
});
heatMap.setMap(map);
/*
Questi punti dovrebbero prevenire da un file.
*/
var vehiclePath = [
new google.maps.LatLng(40.85235, 14.26813),
new google.maps.LatLng(40.85236, 14.26822),
new google.maps.LatLng(40.85236, 14.26822),
new google.maps.LatLng(40.85236, 14.26816),
new google.maps.LatLng(40.85258, 14.26811),
new google.maps.LatLng(40.85364, 14.26793),
new google.maps.LatLng(40.85414, 14.26778),
new google.maps.LatLng(40.8554, 14.2676),
new google.maps.LatLng(40.8579, 14.27286),
new google.maps.LatLng(40.85821, 14.27291),
new google.maps.LatLng(40.8584, 14.27302),
new google.maps.LatLng(40.85859, 14.27325),
new google.maps.LatLng(40.8587, 14.27421),
new google.maps.LatLng(40.85865, 14.27433),
new google.maps.LatLng(40.85866, 14.27446),
new google.maps.LatLng(40.86656, 14.291),
new google.maps.LatLng(40.86653, 14.29102)
];
var path = new google.maps.Polyline({
path: vehiclePath,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
path.setMap(map);
}
/*Callback*/
loadHeatMapData(drawHeatMap)
</script>
</head>
<body>
<div id="map-canvas"></div>
<p id="demo"></p>
</body>
</html>
Unfortunately, when I try to call it inside my Liferay portal, I can't see any javascript running.
The following code creates a heatmap (with the Google API), the points are obtained with an asynchronous call to the webserver
via SOAP (it's a method available from an entity of my project).
I also tried to add the tag
<header-portlet-javascript>
"https://maps.googleapis.com/maps/api/js?libraries=visualization sensor=true?key=AIzaSyCzoFE1ddY9Ofv0jjOvA3yYdgzV4JvCNl4"
</header-portlet-javascript>
with no sucess.
Any help is appreciated.
Without being able to test your code currently, I see two issues with it:
Your JSP contains <html>, <head> and <body> elements etc. These are not allowed in portlets and won't work the same way as in a standalone page
Further, your contains superfluous quotes.
<header-portlet-javascript>
"https://maps.googleapis.com/and/so/on"
</header-portlet-javascript>
I'd expect this to literally be added to the page, resulting in double quotes
<script type="text/javascript" src=""https://maps.googleapis.com/and/so/on""></script>
Obviously, this doesn't work. Please check what ends up on the generated page when you add your portlet to it. Also, remove the extra quotes and try again.
Deae Olaf,
I applied your advice to my code.
With the support of the internet explorer debbuger, I found out that the code inside the drawHeatmpaData is like being commented (please, look at the picture)
.
In order to prevent from you code being commented, I found that we cannot use // to comment,
because all the text even the code is treated as comment.
I replace all // with /**/ but it still does not work.

Unable to bind to click event on Leaflet popup

I'm using Leaflet to draw a map, within the popups I've added a link that should lead to a more detailed description, the description is separated from map and arranged into list using an accordion, so every description is hidden.
I can use an anchor to link to the accordion content, but I need to execute some JavaScript onclick so I am trying to add a click event handler - its not working.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>-->
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]-->
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<div id="log"></div>
<div id="map_box_text" class="status_half">
<br>
<br>
<p>List made using JQuery UI accordion, every element is hidden, only on hover it opens, you can click on it to display on map, reverse cliking on map should aopen accordion list description (this), it's currently done using permalinks because I cannot catch click event on a or span tag.
<div class="accordion">
<h4> Ioff :: **** ***</h4>
<div>Detailed data</div>
<br>
<br>
<h4>Us sb :: **** *** </h4>
<div>Detailed data</div>
<br>
<br>
<h4>Ioff :: **** ***</h4>
<div>Detailed data</div>
<br>
<br>
<h4>Us sb :: **** *** </h4>
<div>Detailed data</div>
</div>
</div>
<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var map = new L.Map('map', {
center: new L.LatLng(51.641485,-0.15362),
zoom: 13
});
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/a0ead8ee56bd415896e0c7f7d22e8b6e/997/256/{z}/{x}/{y}.png',
cloudmadeAttrib = 'Map data © 2011 OpenStreetMap contributors',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});
map.addLayer(cloudmade);
var point = {};
point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("Ioff <br>**** ***");
point["point_222_22"] = new L.Marker(new L.LatLng(51.6616333333333,-0.0528583333333333)).bindPopup("Us sb <br>**** ***");
point["point_333_33"] = new L.Marker(new L.LatLng(52.3910783333333,-0.696951666666667)).bindPopup("Ioff <br>**** ***");
point["point_555_44"] = new L.Marker(new L.LatLng(51.641485,-0.15362)).bindPopup("Us sb <br>**** ***");
var points_layer = new L.LayerGroup();
points_layer.addLayer(point["point_111_11"]);
points_layer.addLayer(point["point_222_22"]);
points_layer.addLayer(point["point_333_33"]);
points_layer.addLayer(point["point_555_44"]);
map.addLayer(points_layer);
$('.pointpopup').click(function(){
var pointname = this.id;
map.setView(point[pointname].getLatLng(),15);
point[pointname].openPopup();
});
});
$(window).load(function(){
$("body").click(function(event) {
//console.log('event target is:' + event.target.nodeName);
$("#log").html("clicked: " + event.target.nodeName);
});
$('.map_popup').live('click',function () {
//$('.map_popup').click(function(){
alert('Try to open Accordion ' + $(this).attr('href'))
//console.log('Try to open Accordion');
})
})
</script>
</body>
</html>
you can check it on JS Fiddle
I've reported this as a bug on github to developer of Leaflet here and here but he close bug replying that it's not a issue and I can use another class - which doesn't work.
Edit:
I've found some on my own too: http://jsfiddle.net/M5Ntr/12/
But there is still a problem, potentially there can be a 500 points, so I would like to have as less code as possible, I've tried to create function but I cannot pass variables :(
this is working
point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").on('click', function (e) { console.log("clicked (Try to open Accordion): " + e.target) });
but this is preferable (not working):
point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").on('click', myfunction('point_111_11'));
function myfunction(seclectedId){
//do something with seclectedId
console.log(seclectedId)
}
or even
point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").myBindFunction('point_111_11')
which will do .on('click') or something similar inside ...
As specified in the ticket you raised you can create DOM elements and pass them to the bindPopup method ... so you can do this :
var domelem = document.createElement('a');
domelem.href = "#point_555_444";
domelem.innerHTML = "Click me";
domelem.onclick = function() {
alert(this.href);
// do whatever else you want to do - open accordion etc
};
point["point_555_44"] = new L.Marker(new L.LatLng(51.641485, -0.15362)).bindPopup(domelem);
You just need to update the onclick function to do what you need it to do ....
Here is the above section of code within your example

Categories

Resources