How to add a link to a marker in Leaflet?

S

Semenov_Anton2017-06-21 13:03:40

OpenStreetMap

Semenov_Anton, 2017-06-21 13:03:40

Good afternoon. There is a project in Leaflet, it has markers, tell me how to add a link to a third-party resource in a marker.
Code attached

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Leaflet - свои иконки для маркеров</title>

 <!-- Добавляем файлы стилей CSS для библиотеки -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
 <!--[if lte IE 8]>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
 <![endif]-->
 
  <!-- Добавляем ссылку на JS-скрипт библиотеки -->
 <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>

<style>
 
#map {width: 1280px; height:1024px; }
 
 </style>
 


</head>

<body>
<div id="map"></div>

<script type='text/javascript'>
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', osmAttribution = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});

var map = new L.Map('map');
map.setView(new L.LatLng(56.42712243, 61.91475034), 14)
map.addLayer(osmLayer);

var LeafIcon = L.Icon.extend({
      options: {
        shadowUrl: 'img/shadow.png',
        iconSize:     [32, 37],
        shadowSize:   [51, 37],
        iconAnchor:   [16,37],
        shadowAnchor: [16, 37],
        popupAnchor:  [0, -30]
      }
    });

    var coffeeIcon = new LeafIcon({iconUrl: 'img/coffee-red.png'}),
      cinemaIcon = new LeafIcon({iconUrl: 'img/cinema.png'}),
      restaurantIcon = new LeafIcon({iconUrl: 'img/camera.png'});
      

    
    L.marker([56.43068208,61.9091928], {icon: cinemaIcon}).bindPopup("<strong>Электровоз ВЛ85</strong><br />Грузовой поезд<br /> Номер поезда: <strong>873</strong> <br /> Направление: <strong>Каменск-Уральский - Владивасток</strong> <br /> Путь прибытия: <strong>17</strong> <br /> Скорость: <strong>23 км/ч</strong> <br /> Количество вагонов: <strong>38</strong> <br /> КТСМ: <strong>В норме</strong>").addTo(map);
    L.marker([56.42703492,61.93025082], {icon: cinemaIcon}).bindPopup("<strong>Электровоз 2ЭС6</strong><br />Грузовой поезд <br /> Номер поезда: <strong>1256</strong> <br /> Направление: <strong>Екатеринбург - Оренбург</strong> <br /> Путь: <strong>11</strong> <br /> Скорость: <strong>0 км/ч</strong> <br /> Количество вагонов: <strong>42</strong> <br /> КТСМ: <strong>В норме</strong>").addTo(map);
    L.marker([56.42688215,61.92840815], {icon: cinemaIcon}).bindPopup("<strong>Электровоз ВЛ11</strong><br />Пассажирский поезд <br /> Номер поезда: <strong>658</strong> <br /> Направление: <strong>Екатеринбург - Новый-Уренгой</strong> <br /> Путь: <strong>7</strong> <br /> Скорость: <strong>0 км/ч</strong>  <br /> Количество вагонов: <strong>16</strong> <br /> КТСМ: <strong>В норме</strong>").addTo(map);
    L.marker([56.42431898,61.94143295], {icon: cinemaIcon}).bindPopup("<strong>Локомотив ЧМЗ3</strong><br />Маневровый локомотив <br />Номер поезд: <strong>556</strong> <br /> Путь: <strong>13</strong> <br /> Скорость: <strong>0 км/ч</strong> <br /> КТСМ: <strong>В норме</strong>  ").addTo(map);
    L.marker([56.43218889,61.89302444], {icon: restaurantIcon}).bindPopup("<strong>Железнодорожный переезд ОТП Соцгород</strong> <br /") .addTo(map);
    

     



</script>





</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

F

freeExec, 2017-06-21
@Semenov_Anton

Well, this is a regular html code, so add a link to the marker.

.bindPopup("   <br><a href='http://гуляй-душа.рф'>Идите в п...</a>");