I am using leafletjs inside a Spring MVC Framework app. I want to use custom Icons using costum images for different icons.
This is the hierarchy of my project:
webaapp
--- core
-------- css
-------- js
-----------images (leafletjs images)
Here the code
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/core/css/leaflet.css" />
<title>leafletjs</title>
</head>
<body>
THIS IMAGE IS OK, I CAN SEE IT:
<img src="${pageContext.request.contextPath}/resources/core/images/marker-icon-2x-blue.png"/>
<div id="mapid" style="width: 800px; height: 600px"></div>
<script src="${pageContext.request.contextPath}/resources/core/js/leaflet.js"></script>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution:
'osm',
id: 'mapbox.streets'
}).addTo(mymap);
var greenIcon = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-green.png'}),
redIcon = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-red.png'}),
blueIcon = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-blue.png'}),
yellowIcon = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-yellow.png'});
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(mymap)
.bindPopup(" ").openPopup();
L.marker([51.49, -0.091], {icon: greenIcon}).addTo(mymap)
.bindPopup(" ").openPopup();
L.marker([51.48, -0.092], {icon: greenIcon}).addTo(mymap)
.bindPopup("").openPopup();
L.marker([51.47, -0.098], {icon: greenIcon}).addTo(mymap)
.bindPopup(" ").openPopup();
var popup = L.popup();
</script>
</body>
</html>
If I don't custimaze the image I see that the default marker icon is here and it shows up perfectly:
http://localhost:8080/myApp-1.0-SNAPSHOT/resources/core/js/images/marker-icon-2x.png
but for the custom ones I've tried several things without success:
new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-green.png'}),
new LeafIcon({iconUrl: 'images/marker-icon-2x-green.png'}),
new LeafIcon({iconUrl: '/images/marker-icon-2x-green.png'}),
new LeafIcon({iconUrl: '/resources/core/js/images/marker-icon-2x-green.png'}),
new LeafIcon({iconUrl: 'resources/core/js/images/marker-icon-2x-green.png'}),
adding an alert('${pageContext.request.contextPath})' within the inner content of my script to see what it resolves, the message is the contect name of my Application: /myApp-1.0-SNAPSHOT
I also tried with
<spring:url value="/resources/core/js/images/marker-icon-2x-green.png" var="myImage" />
var greenIcon = new LeafIcon({iconUrl:'${myImage}'})
it didn't work either, even in the JSP works perfectly
EDIT following edits 8-12 of the question:
Alright, If I understand correctly, you added your custom icon images in the same
imagesfolder as Leaflet default icon?In that case, you could take advantage of Leaflet default icon image automatic path resolution
L.Icon.Default.imagePathto build your own path.I guess something like:
Where do you define your
LeafIcon?What does
'${pageContext.request.contextPath}'resolves to within the inner content of your script?Have you tried
'resources/core/images/marker-icon-2x-green.png'? (notice the absence of leading slash)