converted SHP to geoJSON - how to put this on OSM map?

Question

I'm a beginner at this. I converted a shapefile to a .js file but I am having trouble adding this data to a map using leaflet.

The osmscarb.js:

var osmscarb = { "type": "FeatureCollection",

"features": [ { "type": "Feature", "properties": { "Id": 0, "POINT_X": -8826927.77461, "POINT_Y": 5417539.05834, "INTXN": "Luttrell/Danforth", "FILENAME": "Luttrell Loop.jpg" }, "geometry": { "type": "Point", "coordinates": [ -8826927.774612015113235, 5417539.058339669369161 ] } }

I'm putting this in my map:

var myLayer = L.geoJson().addTo(map);
myLayer.addData(osmscarb);

Answer 1

Your problem is that your GeoJSON is in the wrong projections, it needs to be in WGS84 (AKA latitude/longitude), but your data seems to be in state plane or Mercator.

It's probably easiest to use whatever program you used to turn your shp into GeoJSON to re-project the data, though if that isn't an option there is a plugin that might help though I'd avoid doing this at all costs if possible.

Answer 2

From the Leaflet GeoJSON example:

GeoJSON file:

var bicycleRental = {
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -104.9998241,
                    39.7471494
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
            },
            "id": 51
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -104.9983545,
                    39.7502833
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
            },
            "id": 52
        }
  ]
);

HTML CODE to define the FeatureCollection:

L.geoJson([bicycleRental, campus], {

            style: function (feature) {
                return feature.properties && feature.properties.style;
            },

            onEachFeature: onEachFeature,

            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, {
                    radius: 8,
                    fillColor: "#ff7800",
                    color: "#000",
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.8
                });

http://leafletjs.com/examples/geojson-example.html

Full GEOJSON File http://leafletjs.com/examples/sample-geojson.js