CODEWITHSUNDEEP
javascriptjsonmapsleaflet
RogerHN
RogerHN

Reputation: 614

How to load json file on leaflet and style it?

I want to load the markers that I have on my html code from a json file, and load the other json file with custom markers. This file have custom coordinates that needs to be specified as lat and lng. The X coordinates should be lng, and the Y coordinates should be lat. Also, its possible to style each group with individual icons?? I have difficulties working with json files, don't know much about it. Example code:

{
  "Resources": [
    {
      "Name": "AITokarServer",
      "coords": [
        {
          "x": -1210.0,
          "y": -1770.0
        },
        {
          "x": -1230.0,
          "y": -1810.0
        },

Full code here: http://plnkr.co/edit/q0Jyi528X22KnXcRg2Fs?p=preview

Upvotes: 0

Views: 1424

Answers (1)

Luke Tully
Luke Tully

Reputation: 143

Here's a—hopefully well commented—example of how you could go about iterating over the json objects and creating markers using the data.

// Pretend this is the response from reading a file
  var geoJson = {
    resources: [{
      x: 4288,
      y: -4288,
    }, {
      x: -2320,
      y: -4000,
    }, {
      x: -2320,
      y: -4080,
    }, {
      x: -2400,
      y: -804,
    }, {
      x: -2370,
      y: -1092,
    },
    {
      x: -2470,
      y: -1192,
    },
    {
      x: -2320,
      y: -1122,
    },
    {
      x: -2570,
      y: -1125,
    },
    {
      x: -1350,
      y: -1252,
    },
    {
      x: -1355,
      y: -2125,
    }]
  };


  // Iterate over the resources array of the geoJson object
  // Nested properties of object literals (JSON) can be accessed using dot notation or array syntax
  // eg: dot notation: geoJson.resources
  // eg: array syntax: geoJson["resources"]
  for (var i = 0; i < geoJson.resources.length; i++) {

    // Create a local variable pointing to the
    // coordinate pair object at index i in the resources array of objects
    var currentCoordPair = geoJson.resources[i];

    // Construct a 2 item array containing the x and y values of the current object
    var xyArray = [currentCoordPair.x, currentCoordPair.y];

    // Create a new marker object just like you did before
    var marker = L.marker(xyArray, {icon: icon01});


    // Add the marker to the map
    var addedMarker = marker.addTo(map);


    // Bind your popup
    addedMarker.bindPopup("Base");

  }

And a link to the plunker which is just a fork of your code. http://plnkr.co/edit/O8xqcQlWJM3JiztQXePP

I noticed that you were handling LatLng values in other areas of the Plunker you provided. Supposing you have an object like the following:

{lat: 152.25151, long: 125.51251} // Just example values

In this case you'd be able to access and apply the values to markers in the same way that I showed above. The difference being you would access currentCoordPair.lat rather than currentCoordPair.x

Hope that helps

Upvotes: 1

Related Questions