4

This question already has an answer here:

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"
        }
    }]}

marked as duplicate by matt wilkie Jan 23 '14 at 17:52

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

8

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)
  • Always the gotcha... – Mapperz Jan 23 '14 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 '14 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 '14 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 '14 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 '14 at 18:13

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