Creating graph inside a leaflet popup - Javascript Leaflet

Javascript examples for Leaflet:Pop up

  1. HOME
  2. Javascript
  3. Leaflet
  4. Pop up

Description

Creating graph inside a leaflet popup

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"> 
      <script type="text/javascript" src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
      <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> 
      <style id="compiled-css" type="text/css">

html,//from   w  w  w  .j  av a  2s.c  o m
body,
#map {
   height: 100%;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
      var map = L.map('map').setView([51.505, -0.09], 13);
      L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
        maxZoom: 16
      }).addTo(map);
      var geojsonFeatures = [{
        "type": "Feature",
        "properties": {
          "name": "test1",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [-0.09, 51.5]
        }
      }, {
        "type": "Feature",
        "properties": {
          "name": "test2",
        },
        "geometry": {
          "type": "Point",
          "coordinates": [-0.09, 51.51]
        }
      }];
      L.geoJson(geojsonFeatures, {
        style: function(feature) {
          return {
            opacity: 0,
            fillOpacity: 0.5,
            fillColor: "#0f0"
          };
        },
        onEachFeature: function(feature, layer) {
          var div = $('<div id="' + feature.properties.name + '" style="width: 200px; height:200px;"><svg/></div>')[0];
          var popup = L.popup().setContent(div);
          layer.bindPopup(popup);
          if (feature.properties.name === 'test1') {
            var svg = d3.select(div).select("svg").attr("width", 200).attr("height", 200);
            svg.append("rect").attr("width", 150).attr("height", 150).style("fill", "lightBlue");
          }
        }
      }).addTo(map);
    }

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

Related Tutorials