link to an url page from a marker in a map javascript

Question

I am writing a blog with html, php and javascript about my travels. I have a classical menu in which I choose a country. That links me to a new page with an article about this country.

I would like to change it like this : I have a map with a marker for each country I went to. I would like to click on the marker to move to the corresponding page.

In my javascript I have my map and my markers :

var map = L.map('mapid').setView([25, 22], defaut_zoom);
var carte="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"

L.tileLayer(carte, {
    attribution:'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'}).addTo(map);      
    var finlande = L.marker([60.1698,24.93837],{icon: satIcon}).addTo(map);
    var pouce = L.marker([47.50075,9.742309999999975]).addTo(map);

    //I tried to use an EventListener :

    finlande.addEventListener('click',function (event) {
        event.preventDefault();
        document.getElementById("lien");
    });
})

it links to my php file :

<img id=lien><a href="finlande.html">

But it does not work. I have some basics in javascript but I have to admit that I get confused with what I can do in js and what I should do in html or php. Thank you in advance for help !

Why is this tagged as google-maps when you are using leaflet? — davidkonrad, Nov 28 '17 at 17:55
Your event handler isn't actually _doing_ anything. Sure, you're grabbing an element, but you don't take any action on it or anything. — Patrick Q, Nov 28 '17 at 18:08

score 1 · Answer 1 · answered Nov 28 '17 at 21:12

1

You can add some action in your event listener, in example to go to url:

finlande.addEventListener('click',function (event) {
    event.preventDefault();
    window.location = "finlande.html"; 
});

answered Nov 28 '17 at 21:12

deevee

1,550
15
21

Thank you ! I used the solution of ghybs and I added your window.location advice :) – J.Delannoy Dec 04 '17 at 13:04

score 1 · Accepted Answer · edited Aug 23 '23 at 08:07

Bienvenue sur SO!

The low level addEventListener method is for Elements.

Leaflet L.marker factory (and the like) return a JavaScript object, which internally manage the Element that is displayed on the page.

Leaflet provides you with its own mechanism to listen to events on those objects, but the API is similar to the low level one (or actually, similar to other libraries like jQuery):

var map = L.map("map").setView([48.85, 2.35], 12);

var marker = L.marker([48.85, 2.35]).addTo(map);

marker.on('click', function(leafletEvent) {
  alert(leafletEvent.latlng);
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<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>

See also that question on GIS Stack Exchange: Add an event listener on a Marker in Leaflet

Then if you want the user to be redirected to some page when he/she clicks on the marker, instead of the above alert example, simply use window.location = "finlande.html" for example, like shown in @d324223's answer.

link to an url page from a marker in a map javascript

2 Answers2