3

I am new to JavaScript and Leaflet too. I made a basic map in Leaflet. I have also floated one sample geojson file in it. Now I also want leaflet for sourcing(co-ordinates) to my PHP file. So I need to pass the coordinate(latlng) values of marker and polygon in PHP which is drawn by using leaflet drawing tools (which comes default with Leaflet API).

enter image description here

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"/>
<meta name="viewport" content="width=decice-width,initial-scale=1"/>
   <title>HTML Page with extension scripts used in header</title>
   <!--Leaflet-->
   <script src="http://leaflet.github.io/Leaflet.draw/docs/examples/libs/leaflet-src.js"></script>
     <!-- <script src="lib\leaflet\leaflet.js"></script> -->
   <link rel = "stylesheet" href="lib/leaflet/leaflet.css"/>
   <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">  
   <!--     RESOURCES ---->
   <script src="data/Cotton.geojson"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/Leaflet.draw.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/Leaflet.Draw.Event.js"></script>
   <link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/src/leaflet.draw.css"/>
   <script src="http://leaflet.github.io/Leaflet.draw/src/Toolbar.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/Tooltip.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/ext/GeometryUtil.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/ext/LatLngUtil.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/ext/LineUtil.Intersect.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/ext/Polygon.Intersect.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/ext/Polyline.Intersect.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/ext/TouchEvents.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/draw/DrawToolbar.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Feature.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.SimpleShape.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Polyline.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Marker.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Circle.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.CircleMarker.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Polygon.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/draw/handler/Draw.Rectangle.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/edit/EditToolbar.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/EditToolbar.Edit.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/EditToolbar.Delete.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/Control.Draw.js"></script>   
   <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.Poly.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.SimpleShape.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.Rectangle.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.Marker.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.CircleMarker.js"></script>
   <script src="http://leaflet.github.io/Leaflet.draw/src/edit/handler/Edit.Circle.js"></script>
   <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
   <script src="lib/leaflet/Google.js"></script>   
   <style type="text/css">
        #map{height:600px;
             width:800px}
   </style>
</head>
<body>
<h1>Leaflet JavaScript</h1>
<div id = "map"></div>
 <div id="co-ordinates"> 
 <input type = "text" align>
</div>
<script>

 function cottonStyle(feature){
       return{
            //fillColor: 'red',
            fillColor: getcottonColor(feature.properties.Total_Farmers),// colour is comming from function(getcottonColor)
            weight: 2,
            opacity:1,
            color: 'white',
            dashArray:3,
            fillOpacity:0.7
           }
    }
 // Thematic map as per number of farmers, sourcing the fillstyle to function(cottonStyle)
 function getcottonColor(tf){
         if(tf>5000){
              return 'red'
             }
          else if(tf>1000){ 
              return 'blue' 
              }
              else if (tf>=0){
                  return 'green'
                  }
    }

 //
 var markers = new Array();
 function countiresOnEachFeature(feature,layer){
        //layer.bindTooltip(feature.properties.Total_Farmers.toString(), {noHide: true}).getBounds.getCenter().openTooltip(),           
        layer.bindTooltip("<h4>"+feature.properties.District+"</h4>",{noHide: true}).open,
        layer.bindPopup("<h4>Dist Name :"+feature.properties.District+"</h4>"+
                        "<h5>Crop Type : "+feature.properties.Crop_Type+"</h5>"+
                                                "</br>Total Farmers : "+feature.properties.Total_Farmers+" lakh"+
                                                "</br>Loanee Farmers : "+feature.properties.Loanee_Farmers+" lakh"+
                                                "</br>Non Loanee Farmers : "+feature.properties.Non_Loanee_Farmers+" lakh"+
                                                "<br>Area Insuranced : "+feature.properties.Area_Covered+" lakh hec"+
                                                "<br>Total Sum Insuranced : "+feature.properties.Sum_Insured_Total+
                                                "<br>Farmers Share : "+feature.properties.Farmer_share+
                                                "<br>State Share : "+feature.properties.State_Share+
                                                "<br>Central Share :"+feature.properties.Central_Share+
                                                "<br>Total : "+feature.properties.Total),
        layer.on(
        {
           mouseover: highlightFeature,
           mouseout : resetHighlight,
           click : zoomToFeature
         }  
        );

    }

 //Highlight geojson feature
 function highlightFeature(e){
       var layer = e.target;
       layer.setStyle(
      {
          weight: 5,
          color: 'black',
          fillColor: 'white',
          fillOpacity:0.5
      }
       );

      if(!L.Browser.ie && !L.Browser.opera){
          layer.bringToFront();
          } 
   } 

 // Remove highlight of geojson feature
  function resetHighlight(e){
         cottonLayer.resetStyle(e.target);
         }  
 //Auto Zoom to geojson feature          
    function zoomToFeature(e){
             map.fitBounds(e.target.getBounds());
             }

 var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }),
        map = new L.Map('map', { center: new L.LatLng(29.331244, 76.265181), zoom: 8 }),
        cottonLayer =  new L.geoJson(
        cotton,
        {
            style: cottonStyle,
            onEachFeature: countiresOnEachFeature,
            }
        ).addTo(map);
        //.bindPopup("<b>District Name : </b>");
        drawnItems = L.featureGroup().addTo(map);
       // var point=[29.331244, 76.265181];
        marker = new L.marker([29.331244, 76.265181]).addTo(map).bindTooltip("Map Center",{toHide: true}).openTooltip();

L.control.layers({
    'osm': osm.addTo(map),
   // 'Cotton': cottonLayer.addTo(map),
    "google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
        attribution: 'google'
    })
}, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
map.addControl(new L.Control.Draw({
    edit: {
        featureGroup: drawnItems,
        poly: {
            allowIntersection: false
        }
    },
    draw: {
        polygon: {
            allowIntersection: false,
            showArea: true
        }
    }
}));

map.on(L.Draw.Event.CREATED, function (event) {
    var layer = event.layer;

    drawnItems.addLayer(layer);

});

//document.getElementById("co-ordinates").innerHTML = 5 + 6

0
map.on(L.Draw.Event.CREATED, function (e) {
    var layer = e.layer;
    drawnItems.addLayer(layer);
    console.log(layer.getLatLngs())
});
  • Welcome to GIS.Stackexchange. Could you please provide some context to your answer, more explanations, maybe a source, so people can understand the underlying principles? – Kantan Jun 18 at 7:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.