Fri, 02/03/2017 - 12:55
#1
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
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>
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!
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