Plot Markers on leaflet map - Javascript Leaflet

Javascript examples for Leaflet:Marker

  1. HOME
  2. Javascript
  3. Leaflet
  4. Marker

Description

Plot Markers on leaflet map

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>  Harvey Kadyanji</title> 
      <style>

#map{/* w  w w. ja  v  a2  s. c om*/
   height: 300px;
}


      </style> 
   </head> 
   <body translate="no">  
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css"> 
      <script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>   
      <div id="map"></div>  
      <script>
      var mymap = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
   {attribution: '&copy; <a href="http://www.opencyclemap.org">OpenCycleMap</a>, &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'})
   .addTo(mymap);
var locations = [
  {lat: "51.501174", lng: "-0.125745"},
  {lat: "51.503415", lng: "-0.119554"},
  {lat: "51.501275", lng: "-0.119210"}
]
function addToMap(locationArray){
   [].forEach.call(locationArray, function(location){
       var marker = L.marker([location.lat, location.lng]).addTo(mymap);
    })
  }
addToMap(locations);
      </script>  
   </body>
</html>

Related Tutorials