Jquery Ajax with Leaflet and MarkerCluster - Javascript Leaflet

Javascript examples for Leaflet:Marker

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

Description

Jquery Ajax with Leaflet and MarkerCluster

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Mapbox / Leaflet.Markercluster getLayers()</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css"> 
      <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css"> 
      <script type="text/javascript" src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css"> 
      <style id="compiled-css" type="text/css">

#map {//  w w w.java 2  s .c  om
   height: 440px;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
});
var map = L.map('map')
    .setView([50.5, 30.51], 15)
    .addLayer(osm);
var markers = new L.FeatureGroup();
  map.on('popupopen', function () {
            $('.link').click(function (e) {
                createDialog();
            });
        });
function getRandomLatLng(map) {
    var bounds = map.getBounds(),
        southWest = bounds.getSouthWest(),
        northEast = bounds.getNorthEast(),
        lngSpan = northEast.lng - southWest.lng,
        latSpan = northEast.lat - southWest.lat;
    return new L.LatLng(
    southWest.lat + latSpan * Math.random(),
    southWest.lng + lngSpan * Math.random());
}
   var markerClusters = L.markerClusterGroup();
function populate() {
    for (var i = 0; i < 10; i++) {
        var marker = new L.marker(getRandomLatLng(map));
        marker.bindPopup("<a class=\'link\' ><p>Lorem ipsum dolor sit</p>Permit:'"  + i + "'</a>'", {
            showOnMouseOver: true
        });
           markerClusters.addLayer(marker);
    }
    return false;
}
 function createDialog() {
         $.ajax({
            dataType: 'html',
            url: 'http://a.tile.openstreetmap.org/0/0/0.png',
            success: function (data) {
                $('#dvInfo').html(data);
            }
        });
 }
   map.addLayer(markerClusters);
populate();
    });

      </script> 
   </head> 
   <body> 
      <div id="map"></div> 
      <div id="dvInfo"></div>  
   </body>
</html>

Related Tutorials