Develop Reference

Leaflet .on() Eventlistener with markers

So I have a js file to implement a leaflet map in my blade file.
$(document).ready(function(){
const container = document.getElementById('kkpAllMap')
if(container) {
var coordinates = $('#kkpAllMap').data('coordinates')
const kkpAllMap = L.map(
'kkpAllMap',
{
center: [11.5639911, 104.909288],
zoom: 13,
}
)
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 50,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: mytoken
}).addTo(kkpAllMap);
var kkpnIcon = L.icon({
iconUrl: '/icons/kkpIcon.png',
iconSize: [38, 65], // size of the icon
iconAnchor: [19, 64], // point of the icon which will correspond to marker's location
popupAnchor: [-5, -56] // point from which the popup should open relative to the iconAnchor
});
var markers = []
for (var i = 0; i < coordinates.length; i++) {
var marker = L.marker(
[coordinates[i][1], coordinates[i][2]],
{icon: kkpnIcon}
)
.addTo(kkpAllMap)
.on('click', {foo: "bar"}, clickZoom);
markers.push(marker)
}
function clickZoom(e) {
kkpAllMap.setView(e.target.getLatLng(),15);
console.log(e.data.foo)
}
}
})
when I click on each markers, i want to log the parameter (foo) that I passed to my function. Instead, it gave me this error:
leaflet.js:5 Uncaught TypeError: a.fn.call is not a function
Anyone knows how to solve this problem?

This works for me!
$(document).ready(function(){
const container = document.getElementById('kkpAllMap')
if(container) {
var coordinates = $('#kkpAllMap').data('coordinates')
const kkpAllMap = L.map(
'kkpAllMap',
{
center: [11.5639911, 104.909288],
zoom: 13,
}
)
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 50,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: mytoken
}).addTo(kkpAllMap);
var kkpnIcon = L.icon({
iconUrl: '/icons/kkpIcon.png',
iconSize: [38, 65], // size of the icon
iconAnchor: [19, 64], // point of the icon which will correspond to marker's location
popupAnchor: [-5, -56] // point from which the popup should open relative to the iconAnchor
});
var markers = []
for (var i = 0; i < coordinates.length; i++) {
var marker = L.marker(
[coordinates[i][1], coordinates[i][2]],
{icon: kkpnIcon}
)
.addTo(kkpAllMap)
.on('click', function(e){
clickZoom(e, {foo: 'bar'})
})
markers.push(marker)
}
function clickZoom(e, data) {
kkpAllMap.setView(e.target.getLatLng(),15);
console.log(data)
}
}
})
but i want to pass my partner_id, so I would do this instead.
$(document).ready(function(){
const container = document.getElementById('kkpAllMap')
if(container) {
var coordinates = $('#kkpAllMap').data('coordinates')
const kkpAllMap = L.map(
'kkpAllMap',
{
center: [11.5639911, 104.909288],
zoom: 13,
}
)
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 50,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: mytoken
}).addTo(kkpAllMap);
var kkpnIcon = L.icon({
iconUrl: '/icons/kkpIcon.png',
iconSize: [38, 65], // size of the icon
iconAnchor: [19, 64], // point of the icon which will correspond to marker's location
popupAnchor: [-5, -56] // point from which the popup should open relative to the iconAnchor
});
var markers = []
for (var i = 0; i < coordinates.length; i++) {
var marker = L.marker(
[coordinates[i][1], coordinates[i][2]],
{icon: kkpnIcon, partner_id: coordinates[i][0]}
)
.addTo(kkpAllMap)
.on('click', clickZoom)
markers.push(marker)
}
function clickZoom(e) {
kkpAllMap.setView(e.target.getLatLng(),15);
console.log(e.target.options.partner_id)
}
}
})

how to change the colours based on role in leaflet open street maps

var locations = [{ name:"bus", latitude:"12.56", longitude:"25.15, role: "traveler" },
{ name:"bike", latitude:"13.56", longitude:"25.15, role: "traveler" },
{ name:"John", latitude:"14.56", longitude:"25.15, role: "Developer" },
{ name:"David", latitude:"12.56", longitude:"25.15, role: "Developer" },
{ name:"Mango", latitude:"13.56", longitude:"25.15, role: "Fruit" },
{ name:"Apple", latitude:"12.56", longitude:"25.15, role: "Fruit" }]
var map = L.map('mapid').setView([locations[0].latitude, locations[0].longitude], 8);
mapLink =
'ABC Corporation';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink,
maxZoom: 18,
}).addTo(map);
for (var i = 0; i < locations.length; i++) {
marker = new L.marker([locations[i].latitude,locations[i].longitude])
.bindPopup(locations[i].name)
.addTo(map);
}
This is my code I want to change the colour of the marker as per the role, right now if add two records with same latitude and longitude, I am able to see only latest one. how can I see the other marker also

For your first question "Change color":
You can't change the color of a marker but you can replace the default Icon, with another Icon.
https://leafletjs.com/examples/custom-icons/
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
for (var i = 0; i < locations.length; i++) {
marker = new L.marker([locations[i].latitude,locations[i].longitude],{icon: greenIcon})
.bindPopup(locations[i].name)
.addTo(map);
}
To see both Markers on the same point, you can use a spiderfy Library, like: https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet or https://github.com/Leaflet/Leaflet.markercluster

From my code - function to return an icon with a colour selected by 'feature.properties.service':
function busservice(feature) {
var service = feature.properties.service;
var html = '<img class="arrow' + service +'" src="arrow-up-icon-29566.png">'
return new L.DivIcon({
iconSize: 40,
html: html});
}
and some CSS - a yellow icon for '26' -
img.arrow26 {
filter: invert(96%) sepia(50%) saturate(7493%) hue-rotate(1deg) brightness(102%) contrast(101%);
}

Problem with pointTolayer in my Leaflet Map

I tried to apply pointTolayer in my Leaflet Map it but it still throws the classic icons. There is an error in the Code.
$.getJSON("https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson",function(data){
var baseline_person = L.icon({
iconUrl: 'baseline_person.png',
iconSize: [18,18]
});
// add GeoJSON layer to the map once the file is loaded
L.geoJson(data, {
pointTolayer: function(feture, latlng){
return L.marker(latlng,{icon: baseline_person});
}
}).addTo(map);
});

Your L.geoJson should be L.geoJSON and pointTolayer should be pointToLayer respectively.
And then define iconSize and iconAnchor as L.icon params
const customMarker = new L.icon({
iconUrl: "marker.png",
iconSize: [32, 32],
iconAnchor: [10, 41],
});
axios
.get(
"https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson"
)
.then(response => {
L.geoJSON(response.data, {
pointToLayer: (feature, latlng) => {
return L.marker(latlng, { icon: customMarker });
}
}).addTo(map);
});
Demo

LeafletJS : How to use L.Routing.itinerary in leafletjs and hover event on route?

var mymap = L.map('mapid').setView([1.369115, 103.845436], 12);
L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibmF5dGh1cmFvaG5teWludCIsImEiOiJjajMxN25pNjMwMDFxMndvNzZhb2xqZmxxIn0._RFHs1Tj81KAk7u-5CJ6bA', {
attribution: 'My Office',
maxZoom: 18,
id: 'mapbox',
accessToken: 'pk.eyJ1IjoibmF5dGh1cmFvaG5teWludCIsImEiOiJjajMxOGFsa3owMDBkMnZwZHdmeHdmdzBlIn0.jg5bQjGhfAEmFMRxLArGFQ'
}).addTo(mymap);
var carIconStart = L.icon({
iconUrl: 'img/car-onmap.png',
iconSize: [40, 40], // size of the icon
popupAnchor: [0, -20] // point from which the popup should open relative to the iconAnchor
});
var carIconEnd = L.icon({
iconUrl: 'img/car-onmap.png',
iconSize: [40, 40], // size of the icon
popupAnchor: [0, -20] // point from which the popup should open relative to the iconAnchor
});
L.marker([1.29828408457,103.789110693]).addTo(mymap).bindPopup("Start from Office");
L.marker([1.41887924373,103.847815159]).addTo(mymap).bindPopup("End in MyHome");
var control = L.Routing.control({
waypoints: [
L.latLng(1.29828408457,103.789110693),
L.latLng(1.41887924373,103.847815159)
],
lineOptions:{
styles: [{color: 'lightgreen', opacity: 1, weight: 5}],
addWaypoints:false
},
draggableWaypoints: false,
createMarker: function(){ return false; },
router: L.Routing.mapbox('pk.eyJ1IjoibmF5dGh1cmFvaG5teWludCIsImEiOiJjajMxOGFsa3owMDBkMnZwZHdmeHdmdzBlIn0.jg5bQjGhfAEmFMRxLArGFQ'),
}).addTo(mymap);
L.Routing.itinerary({pointMarkerStyle: {radius: 5,color: '#03f',fillColor: 'white',opacity: 1,fillOpacity: 0.7}});
L.Routing.errorControl(control).addTo(mymap);
<link href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.5/leaflet-routing-machine.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.5/leaflet-routing-machine.js"></script>
<style>
body { margin:0; padding:0; }
#mapid { height:220px;}
.leaflet-routing-container{
display: none;
}
</style>
<body>
<div id="mapid"></div>
</body>
I would like to add hover event on the route of waypoint.
In the documentation of leaflet, to add hover event can use L.Routing.itinerary.
http://www.liedman.net/leaflet-routing-machine/api/#itineraryoptions
Please advice me..
Thank you so much

You can check Leaflet Label Plugin.
Install Leaflet Label Plugin.
URL : https://github.com/Leaflet/Leaflet.label
Good Luck!!

Leaflet js adding custom marker pic fails

I am trying to add a custom marker picture but it keeps giving me the standard blue marker.
Here's my custom marker definition:
var aMarker = {
lat:location.lat,
lng:location.lng,
message: location.name,
// focus: true,
draggable: false,
getMessageScope: function() { return $scope; },
message: '<button class="icon-left ion-information-circled" ng-click=""></button> '+location.name,
compileMessage: true,
'icon': {
'type': "awesomeMarker", // i use awesomeMarker for font awesome
'icon': spotMarkerIcon, // a variable for my icon
}
};
var spotMarkerIcon = L.icon({
iconUrl: './images/SpotMarker.png'
});
angular.extend($scope,{
defaults: {
tileLayer: 'http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}',
maxZoom: 16,
zoomControlPosition: 'topright',
path: {
weight: 10,
color: '#800000',
opacity: 1
}
}
});
angular.extend($scope,{
markers : new Array()
});
$scope.markers.push(aMarker);

Have you tried to define the dimensions of the icon like this:
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
EDIT: Here is a working example: http://jsfiddle.net/beLxbfep/