CODEWITHSUNDEEP
jsonleaflet
khennenf
khennenf

Reputation: 13

Convert Lat Lng to Coordinates for Leaflet

I am working with a data set that has been converted from csv to postgres via sqlalchemy using a Jupyter Notebook and Pandas dataframes then converted to json via flask app.

I would like to use the lat/lng fields from the json to create a marker location that I can use for leaflet mapping.

I can't seem to figure out how to combine the lat/lng values in to a location like [40.77888899, -73.97]

The lat/lng fields individually are in the right format but concatenating the fields in to one any way I have tried seems to create a string value that the create marker function won't accept:

Here is an example of the json that will do what I want:

{
  "age": "Juvenile", 
  "date": 10062018, 
  "lng": -73.9762246600197, 
  "lat": 40.775164077652, 
  "shift": "AM", 
  "id": "10A-AM-1006-03",
  "location": [40.775164077652, -73.9762246600197]
}   *The location field in the above was added manually to demonstrate

Here is what I have:

  {
    "age": "Adult", 
    "date": 10062018, 
    "lng": -73.97624942, 
    "lat": 40.77501753, 
    "shift": "AM", 
    "id": "10A-AM-1006-01"
    "location": "40.77501753, -73.97624942"
  }

The location field in the second example: "location": "40.7750175306716, -73.9762494239719", was created in the original csv using concat for the lat and lng in excel. The original csv dataset has no location column in that format.

I have tried creating variables for lat and lng in JavaScript, then using [lat, lng] as the marker and that didn't work.

So any suggestions as how to create the field type I need, either in the original csv, while converting csv to a dataframe, after converting to sql, or in the javascript using the json data? How to just the use the original lat/lng values in the json as a location type leaflet will accept for a marker?

Upvotes: 1

Views: 1800

Answers (1)

Falke Design
Falke Design

Reputation: 11348

You can use the latlng directly from the json L.marker([json.lat,json.lng]).addTo(map)

Here is a simple example: https://jsfiddle.net/falkedesign/54hoaerx/

PS: I think that lat and lng needs to be switched or do you really want to place the marker in the Antarctic instead of in New York?

Upvotes: 1

Related Questions