Leaflet – How to Make Point Markers Lead to Webpage Link on Click

javascriptleafletmarkers

I would like to make my map markers lead to a webpage link on click but I'm not quite sure how to make that happen.

I'm looking for a way to make my point marker lead to a link on click, rather than a link showing up in the pop-up. So the user clicks on the point marker and is led to a webpage in a new tab. How can I do this?

    //create variable to hold the map element, give initial settings to map
let map = L.map("map", {
  center: [38.1, -98],
  zoom: 5,
  //crs: crs,
});

//create basemap layer
let osm = L.tileLayer(
  "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png",
  {
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
    subdomains: "abcd",
  }
);

//add to map
osm.addTo(map);

//create data variable
let data = [
  { coord: [40.308746567390294, -105.08229135535235], desc: "Berthoud, CO" },
  { coord: [39.74102996214569, -104.97940776843281], desc: "Denver, CO" },
  { coord: [30.138432902431312, -81.47832258872786], desc: "Jacksonville, FL" },
  { coord: [41.879448988274895, -87.6315117046291], desc: "Chicago, IL" },
  { coord: [41.8007476149432, -88.07480791524236], desc: "Lisle, IL" },
  { coord: [39.77999819036976, -89.64469580209537], desc: "Springfield, IL" },
  { coord: [38.04604579443191, -84.50244254581874], desc: "Lexington, KY" },
  { coord: [41.472330129058626, -87.06337336083872], desc: "Valparaiso, IN" },
  { coord: [39.77172821881897, -86.15817364592962], desc: "Indianapolis, IN" },
  { coord: [41.26104429429596, -95.8669285068911], desc: "Council Bluffs, IA" },
  { coord: [42.36045708792693, -71.05470762310003], desc: "Boston, MA" },
  { coord: [39.96068992182012, -82.99568108206131], desc: "Columbus, OH" },
  { coord: [41.499389586400504, -81.68319302542062], desc: "Cleveland, OH" },
  { coord: [33.999310722137295, -81.04237043257584], desc: "Columbia, SC" },
  { coord: [44.51263315662531, -88.01247710457417], desc: "Green Bay, WI" },
  { coord: [43.060874543136336, -88.1066145780849], desc: "Brookfield, WI" },
];

var logo = L.icon({
  iconUrl:
    "https://d2q79iu7y748jz.cloudfront.net/s/_squarelogo/8ec294c2f144d43bf5d7ec5f4f96d0c9",
  iconSize: [20, 20],
  iconAnchor: [10, 20],
  tooltipAnchor: [0, -20],
});

for (var i = 0; i < data.length; i++) {
  L.marker(data[i].coord, {
    icon: logo,
    alt: "Patrick Engineering logo",
    title: "Click for more info",
    riseOnHover: true,
  })
    .addTo(map)
    .bindTooltip("<h3>" + data[i].desc + "</h3>", { direction: "top" });
}

Best Answer

When creating marker you can set click event processing function for the marker and within it open new browser tab with window.open method. To get the specific URL for the marker it would be the best to expand data with the url property. You bring url property to click processing function through custom option myUrl. Name can be any, as long as it does not interfere with the standard Leaflet options.

Relevant code could then look something like this:

let data = [
  { coord: [40.308746567390294, -105.08229135535235], desc: "Berthoud, CO", url: 'https://www.berthoud.org/' },
  { coord: [39.74102996214569, -104.97940776843281], desc: "Denver, CO", url: 'https://www.denver.org/' },
  .
  .
  .
];

for (var i = 0; i < data.length; i++) {
  L.marker(data[i].coord, {
    icon: logo,
    alt: "Patrick Engineering logo",
    title: "Click for more info",
    riseOnHover: true,
    myUrl: data[i].url
  })
    .addTo(map)
    .bindTooltip("<h3>" + data[i].desc + "</h3>", { direction: "top" })
    .on('click', function(evt) {
      window.open(evt.target.options.myUrl, '_blank');
    });
}
Related Question