Leaflet + Mapquest - Draw an existing polygon

7 posts / 0 new
Last post
vasavi
Leaflet + Mapquest - Draw an existing polygon

Hi,

How can we draw an existing polygon ( for suppose having coordinates from DB) using mapquest and leaflet?

Also can we use Geojson as polygon inputs?

Any code example would be helpful

 

Thanks in Advance

 


MQBrianCoakley
Here is how I did it. There
While the drawing tools aren't related to the MapQuest plugin, here is how I did it. There are a few more samples here.

vasavi
Thank you MQBrianCoakley!

Thank you MQBrianCoakley!

I have tried the examples mentioned. example shows how to draw a rectangle and i am trying to draw a polygon similarly but seems not working 

Any clues?

<script type="text/javascript">
            "use strict";

            var L, MQ;

            window.onload = function() {
                var map, drawnItems, drawControl;

                map = L.map('map', {
                    layers: MQ.mapLayer(),
                    center: [ 40.731701, -73.993411 ],
                    zoom: 12
                });
                
                drawnItems = new L.FeatureGroup();
                map.addLayer(drawnItems);                
          
                /*  drawnItems.addLayer(L.rectangle(
                            [[40.718118,-74.037894],[40.7480365,-73.958243]],
                            {color: "#8bc63f", weight: 1}
                        ));  */
                        
                        var existingPolygon=L.polygon([                  

                                                 [33.3194760, -97.6438880],[32.9716600, -97.7382300],[32.7647320, -97.9102650],[32.1879750, -97.9435620],[32.1571560, -96.8503080],[32.4389300, -96.3675000],[33.3194760, -96.4285450],[33.3194760, -97.6438880]
                                                         
                                                     ])
                        console.log(existingPolygon);
                        drawnItems.addLayer(L.polygon([                  

                                                 [33.3194760, -97.6438880],[32.9716600, -97.7382300],[32.7647320, -97.9102650],[32.1879750, -97.9435620],[32.1571560, -96.8503080],[32.4389300, -96.3675000],[33.3194760, -96.4285450],[33.3194760, -97.6438880]
                                                         
                                                     ])); 
                

                drawControl = new L.Control.Draw({
                    edit: {
                        featureGroup: drawnItems
                    }
                });

                map.addControl(drawControl);
                
                

                map.on('draw:created', function (e) {
                    var type = e.layerType, layer = e.layer, ss = "", lls;
                    if (type === 'marker') {
                        layer.bindPopup('A popup!');
                        document.getElementById('t').innerHTML = "lls: " +
                            layer.getLatLng().lat + "," +
                            layer.getLatLng().lng;
                    } else if (type === 'circle') {
                        document.getElementById('t').innerHTML = "lls: " +
                            layer.getLatLng().lat + "," +
                            layer.getLatLng().lng + ", r: " +
                            layer.getRadius();
                    } else if (type === 'rectangle' || type === 'polygon' || type === 'polyline') {
                        if (type === 'polyline') {
                            lls = layer.getLatLngs();
                        } else {
                            lls = layer.getLatLngs()[0];
                        }
                        lls.forEach(function (a, b) {
                            ss = ss + "[" +a.lat + "," + a.lng + "]";
                            if (layer.getLatLngs().length !== (b + 1)){
                                ss = ss + ",";
                            }
                        });
                        document.getElementById('t').innerHTML = "lls = [" + ss + "];";
                    } else {
                        console.log(type);
                        console.log(layer);
                    }

                    drawnItems.addLayer(layer);

                }); 
                
                

            };
        </script>
        <style>
            #map {
                width: 800px;
                height: 600px;
            }
        </style>


MQBrianCoakley
All I did was change the
All I did was change the rectangle to polygon and use your shape points and it worked great for me.   drawnItems.addLayer(L.polygon(     [[33.3194760, -97.6438880],[32.9716600, -97.7382300],[32.7647320, -97.9102650],[32.1879750, -97.9435620],[32.1571560, -96.8503080],[32.4389300, -96.3675000],[33.3194760, -96.4285450],[33.3194760, -97.6438880]],     {color: "#8bc63f", weight: 1} ));     What is not working for you?   Is there a url where we can see your work?

vasavi
i was just trying to creae a

i was just trying to creae a sample POC and all the code i have is what i pasted above apart from including leaflet, leaflet draw plugin and mapquest-leaflet plugin

Am i missing something or Is anything elase needed?

you were talking about using shape points , Can you provide some sample code drawing an existing polygon which is working for you

 

Thanks in Advance!


vasavi
I just figured out that it is

I just figured out that it is working, but i couldn't see it becoz focus on the map is not correct

Sorry for the confusion

Thanks you so much for the help


MQBrianCoakley
(No subject)