CODEWITHSUNDEEP
javascriptjsongeojson
fdkgfosfskjdlsjdlkfsf
fdkgfosfskjdlsjdlkfsf

Reputation: 3303

Convert javascript to json?

I'm working with leaflets and I've noticed that many examples use a separate js file where a variable is set to a JSON stream.

How would I be able to modify the following example so that it can read off a json file with the geojson and not have the variable declaration in the javascript?

The code looks like this:

<script type="text/javascript">

    var geoJsonData = {
        "type": "FeatureCollection", 
        "features": [
            { "type": "Feature", "id":"1", "properties": { "address": "2"   }, "geometry": { "type": "Point", "coordinates": [175.2209316333,-37.8210922667 ] } },
            { "type": "Feature", "id":"2", "properties": { "address": "151" }, "geometry": { "type": "Point", "coordinates": [175.2238417833,-37.80975435   ] } },
            { "type": "Feature", "id":"3", "properties": { "address": "21"  }, "geometry": { "type": "Point", "coordinates": [175.2169955667,-37.818193     ] } },
            { "type": "Feature", "id":"4", "properties": { "address": "14"  }, "geometry": { "type": "Point", "coordinates": [175.2240856667,-37.8216963    ] } },
            { "type": "Feature", "id":"5", "properties": { "address": "38B" }, "geometry": { "type": "Point", "coordinates": [175.2196982333,-37.8188702167 ] } },
            { "type": "Feature", "id":"6", "properties": { "address": "38"  }, "geometry": { "type": "Point", "coordinates": [175.2209942   ,-37.8192782833 ] } }
        ]
    };

    var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });

    var map = L.map('map')
            .addLayer(tiles);

    var markers = L.markerClusterGroup();

    var geoJsonLayer = L.geoJson(geoJsonData, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.address);
        }
    });
    markers.addLayer(geoJsonLayer);

    map.addLayer(markers);
    map.fitBounds(markers.getBounds());
</script>

I know it can be done with $.getJSON, but I would prefer using L.geoJson, if possible.

Upvotes: 0

Views: 257

Answers (3)

ghybs
ghybs

Reputation: 53185

I know it can be done with $.getJSON, but I would prefer using L.geoJson, if possible.

You seem to not realize that these 2 functions provide different steps of your workflow, as illustrated by the 2 other answers.

You may be misled by other libraries that provide utility functions which perform both steps for you.

jQuery's $.getJSON is to fetch / retrieve data from your server.

Once you have the resulting JS object, you feed it into Leaflet's L.geoJSON factory to have it converted into Leaflet layers.

Upvotes: 0

Miguel Jim&#233;nez
Miguel Jim&#233;nez

Reputation: 1303

To read JSON data from a file you can use the fetch function (read more).

Here is an example:

fetch('http://example.com/movies.json')
    .then(function(response) {
        return response.json();
    })
    .then(function(myJson) {
        // Do something with the JSON data
        console.table(myJson);
    });

In your case:

function doSomething(geoJsonData) {
    var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });

    var map = L.map('map')
            .addLayer(tiles);

    var markers = L.markerClusterGroup();

    var geoJsonLayer = L.geoJson(geoJsonData, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.address);
        }
    });
    markers.addLayer(geoJsonLayer);

    map.addLayer(markers);
    map.fitBounds(markers.getBounds());
}

fetch('http://myserver.com/myfile.json')
    .then(function(response) {
        return response.json();
    })
    .then(doSomething)
    .catch(function(err) {
        // In case of error, display the error message
        console.error(err);
    });

Notice that I put your code inside a callback function, as the fetch function is asynchronous.

Upvotes: 2

mhanley00
mhanley00

Reputation: 729

You can store the geoJSON variable in a separate .js file and import it into the main logic .js file. Try pasting your var geoJsonData in a file called geoJsonData.js, then at the bottom of that file add "module.exports = geoJsonData;". Then on your logic file (ie scripts.js), you can import the variable as is by adding "var geoJsonData = require("./geoJsonData.js"); at the top. Then your call to add the points to the map would be 

function geoJsonMarkers() {  
$.getJSON(geoJsonData, function (data) {
        // this adds the GeoJSON layer to the map once the file is loaded
        L.geoJson(data).addTo(mymap);
}
}

Upvotes: 0

Related Questions