Leaflet + Mapquest - Draw an existing polygon

9 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

 


MapQBrianCoakley
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>


MapQBrianCoakley
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


MapQBrianCoakley
(No subject)

Nazmin
Hey..

Hey..

How can I retieve all the polygon of all the routes between source and destination in mapquest. Please reply

Thanks in advance 


MapQBrianCoakley
It's easiest to grab the
It's easiest to grab the polyline from the route request rather than grab the shape from the map after it's put on. The MapQuest.js L.mapquest.directions.route function has a callback that can be used for this.