4

I've been beating my head against the wall trying to map some points using Leaflet + OSM.

I put in some sample points (near Bellingham, WA, USA). I've checked the JSON with JSfiddle and GeoJsonlint. It's valid. But they both send me to the middle of the ocean or to the bottom of the map. Any idea what I'm missing here?

What I'm seeing:

GeoJson

{
"type": "FeatureCollection",
"features": [
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                48.759553, -122.488225
            ]
        },
        "properties": {
            "name": "ABBOTT NEIGHBORHOOD PARK",
            "address": "1300  SPRUCE ST"
        }
    },
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                48.759553, -121.488225
            ]
        },
        "properties": {
            "name": "DOUBLE OAKS CENTER",
            "address": "1326 WOODWARD AV"
        }
    },
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                48.759553, -123.488225
            ]
        },
        "properties": {
            "name": "DOUBLE OAKS NEIGHBORHOOD PARK",
            "address": "2605  DOUBLE OAKS RD"
        }
    },
    {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                48.759553, -124.488225
            ]
        },
        "properties": {
            "name": "DOUBLE OAKS POOL",
            "address": "1200 NEWLAND RD"
        }
    }]}
Improve this question
2

1 Answer 1

Reset to default
9

Your coordinate pairs are reversed. Try -122.488225, 48.759553, instead of 48.759553, -122.488225. You've been misled by the fact that colloquially we say "lat long" but written it's "long,lat", following the long standing convention that X is the horizontal axis and Y the vertical.

It's more typing, but it will avoid confusion to be explicit about which is which (thanks @blah238):

setView({lat: 17.059417, lng: -96.721622}, 10)
Improve this answer
5
  • Always the gotcha...
    – Mapperz ♦
    Jan 23, 2014 at 16:56
  • 1
    Thanks. Sorry to be the nth newbie to ask this. Lesson learned about reading the doc better. So tricky as so many of those sites that will convert address to geo give you lat/lng. Ok, I get my life back now.
    – Kyle Pennell
    Jan 23, 2014 at 17:01
  • 2
    @KylePennell everyone trips over this sooner or later, and probably more than once. Also we don't seem to have a canonical Q about standard coordinate pair syntax, or at least it's hard to find if it does exist.
    – matt wilkie
    Jan 23, 2014 at 17:46
  • Thanks @mattwilkie. To confirm, does the ordering switch depending on which part of the code? var map = L.map('map').setView([17.059417,-96.721622], 10); In this case, it is [lat,lng]. But otherwise, in geoJson, it's [long,lat]. Correct?
    – Kyle Pennell
    Jan 23, 2014 at 17:51
  • 3
    @Kyle you should use the LatLng object's named properties e.g. setView({lat: 17.059417, lng: -96.721622}, 10) to be explicit. leafletjs.com/reference.html#latlng
    – blah238
    Jan 23, 2014 at 18:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.