How to output in console geojson format lat/long?

Question

I am using leafletFreeDraw and I also tried to follow this SO question

With the following I get the long/lat:

freeDraw.on('markers', function (event) {
  // Listen for any markers added, removed or edited, 
  // and then output the lat lng boundaries.
  console.log('LatLngs:', event.latLngs, 'Polygons:', freeDraw.size());
});

And the console output i get is like:

Array[1]
0
:
Array[20]
0
:
L.LatLng
lat
:
51.51435127755928
lng
:
-0.08651733398437501
__proto__
:
Object
1
:
L.LatLng
lat
:
51.51349664501128
lng
:
-0.08505821228027345
__proto__
:
Object
2
:
L.LatLng

Is there a way that I can append each coordinates and have an output in console like the following?

var states = [{
    "type": "LineString",
    "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {
    "type": "LineString",
    "coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];

I'd be fine even to just have printed in console the first set of coordinates witht he correct formatting, then I will manually copy/paste to my geojson file.

"coordinates": [[-105, 40], [-110, 45], [-115, 55]]

Adam Azad · Accepted Answer · 2016-12-12T13:48:52.093

You can loop over the coordinates created from the drawing, and then push it as an object to a global array--a container.

var states = [];

freeDraw.on('markers', function (event) {

  // create coordinates object
  var polyObj = event.latLngs[0].map(function(o){
      return [o.lat, o.lng];
  });
  // Push new object to states
  states.push({
    "type": "LineString",
    "coordinates":polyObj
  });
});

var LAT_LNG = [51.505, -0.09];
var TILE_URL = 'https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png';

var map = new L.Map(document.querySelector('section.map'), { doubleClickZoom: false }).setView(LAT_LNG, 14);
L.tileLayer(TILE_URL).addTo(map);
var freeDraw = new FreeDraw({ mode: FreeDraw.ALL });
map.addLayer(freeDraw);

// All drawings container.
var states = [];

freeDraw.on('markers', function (event) {
  
  // create coordinates object
  var polyObj = event.latLngs[0].map(function(o){
      return [o.lat, o.lng];
  });
  // Push new object to states
  states.push({
    "type": "LineString",
    "coordinates":polyObj
  });
  
  console.log(states);     
 
});

body {
  margin:0;
}
.map {
  width: 100%;
  height: 70vh;
}
.as-console-wrapper {
  height:30vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css">
<script src="https://rawgit.com/Wildhoney/Leaflet.FreeDraw/master/dist/leaflet-freedraw.web.js"></script>
<section class="map"></section>

excellent thanks a lot. for the sake of the question maybe is good to provide the console.log too, just in case someone will come tot he question. then again thanks a lot — rob.m, Dec 12 '16 at 13:43
@rob.m, you're most welcomed. Added console for future coders — Adam Azad, Dec 12 '16 at 13:49
if we put `console.log(JSON.stringify(states));` within the function is even better as we'll print the correct json format string that we can copy — rob.m, Dec 12 '16 at 14:43

How to output in console geojson format lat/long?

1 Answers1