javascript - How do I read a JSON file with coordinates and plot them on a map? - Stack Overflow

admin管理员组

文章数量:1426804

My JSON file:

[
  {
    "coordinate": [45.464743, 9.189135799999999],
    "Indirizzo": "Bike Sharing P.za Duomo Milano"
  },
  {
    "coordinate": [45.4664299, 9.1976032],
    "Indirizzo": "Bike Sharing P.za S.Babila Milano"
  },
  {
    "coordinate": [45.454943, 9.162632600000002],
    "Indirizzo": "Bike Sharing P.za Cadorna Milano"
  },
  ...
]

I want to make a map with OpenStreetMap and add a marker for every coordinate's address.

I tried this:

<div id="map_id" style="width:100%;height:500px;"></div>
<script>
var map_var = L.map('map_id').setView([45.4642700,  9.1895100], 16);

L.tileLayer('https://{s}.tile.openstreetmap/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href=";>OpenStreetMap</a> contributors'
}).addTo(map_var);

L.marker([45.4642700,  9.1895100]).addTo(map_var)
    .bindPopup('Milan')
    .openPopup();

$.getJSON( "bike_coordinate.json", function(json1) {
   $.each(json1, function(key, data) {
   for (var i = 0; i < json1.length; i++) {
    var place = json1[i];
       // Creating a marker and putting it on the map
    var customIcon = L.icon({
    iconSize:     [38, 40], // size of the icon
    iconAnchor:   [10, 40], // point of the icon which will correspond to marker's location
    popupAnchor:  [5, -40] // point from which the popup should open relative to the iconAnchor
    });
    var marker = L.marker(place.coordinate, {icon: customIcon});
    marker_array.push(tmp_marker);
    tmp_marker.addTo(map_var).bindPopup(place.Indirizzo);
    }
   });
});
</script>

But it only shows the first marker that is not read in bike_coordinate.json. I've got this error:

Uncaught ReferenceError: $ is not defined at (index):217

My JSON file:

[
  {
    "coordinate": [45.464743, 9.189135799999999],
    "Indirizzo": "Bike Sharing P.za Duomo Milano"
  },
  {
    "coordinate": [45.4664299, 9.1976032],
    "Indirizzo": "Bike Sharing P.za S.Babila Milano"
  },
  {
    "coordinate": [45.454943, 9.162632600000002],
    "Indirizzo": "Bike Sharing P.za Cadorna Milano"
  },
  ...
]

I want to make a map with OpenStreetMap and add a marker for every coordinate's address.

I tried this:

<div id="map_id" style="width:100%;height:500px;"></div>
<script>
var map_var = L.map('map_id').setView([45.4642700,  9.1895100], 16);

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

L.marker([45.4642700,  9.1895100]).addTo(map_var)
    .bindPopup('Milan')
    .openPopup();

$.getJSON( "bike_coordinate.json", function(json1) {
   $.each(json1, function(key, data) {
   for (var i = 0; i < json1.length; i++) {
    var place = json1[i];
       // Creating a marker and putting it on the map
    var customIcon = L.icon({
    iconSize:     [38, 40], // size of the icon
    iconAnchor:   [10, 40], // point of the icon which will correspond to marker's location
    popupAnchor:  [5, -40] // point from which the popup should open relative to the iconAnchor
    });
    var marker = L.marker(place.coordinate, {icon: customIcon});
    marker_array.push(tmp_marker);
    tmp_marker.addTo(map_var).bindPopup(place.Indirizzo);
    }
   });
});
</script>

But it only shows the first marker that is not read in bike_coordinate.json. I've got this error:

Uncaught ReferenceError: $ is not defined at (index):217

• javascript
• json
• leaflet
• openstreetmap

Share Improve this question Follow edited Jan 12 at 15:52 user4157124 2,9961414 gold badges3131 silver badges4646 bronze badges asked Jul 3, 2018 at 11:04 AliceGAliceG 8111 silver badge88 bronze badges 8

• 2 If the example @nikoshr added isn't working for you I'd suspect you have some issues with somethibg like not including jQuery or the .json file not being where you expect it. What console errors do you have? – dougajmcdonald Commented Jul 3, 2018 at 12:06
• @dougajmcdonald I've got this error: Uncaught ReferenceError: $ is not defined at (index):217 – AliceG Commented Jul 3, 2018 at 12:26
• 1 That's another problem, you haven't included jQuery in the page, put this in the header of your page : <script src="https://code.jquery./jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>. – cнŝdk Commented Jul 3, 2018 at 12:30
• The problem now is that it can't find the file, is it correct to put the file on the same folder of the app python? – AliceG Commented Jul 3, 2018 at 12:34
• @AliceG You need to put it under your /resources/ directory. – cнŝdk Commented Jul 3, 2018 at 12:37

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 3

Your code reading the JSON file works, it's how you work with the resulting data that's at fault:

• You iterate your array twice, once with $.each(json1 and a second time with for (i = 0; i < locations.length; i++) {. One of them must go.

• You add a tmp_marker to your map that does not exist: use marker.addTo(map_var).bindPopup(place.Indirizzo); instead.

• You use a marker_array variable that is not defined, remove it.

• You declare a custom icon but don't set iconUrl: it's required and breaks Leaflet. For example:

  var customIcon = L.icon({
      iconUrl: 'https://leafletjs./examples/custom-icons/leaf-green.png',
      iconSize:     [38, 40],
      iconAnchor:   [10, 40],
      popupAnchor:  [5, -40]
  });
  

You could write your code as:

$.getJSON( "bike_coordinate.json", function(json1) {

    for (var i = 0; i < json1.length; i++) {
        var place = json1[i];

        // Creating a marker and putting it on the map
        var customIcon = L.icon({
            iconUrl: 'https://leafletjs./examples/custom-icons/leaf-green.png',
            iconSize:     [38, 40],
            iconAnchor:   [10, 40],
            popupAnchor:  [5, -40]
        });
        var marker = L.marker(place.coordinate, {icon: customIcon});
        marker.addTo(map_var).bindPopup(place.Indirizzo);
    }

});

And a demo.

$.each() is sufficient here, you don't need a for loop inside of it; the data parameter of the $.each() callback function holds the data for the place object:

$.getJSON( "bike_coordinate.json", function(json1) {
   $.each(json1, function(key, data) {
      var place = data;
      // Creating a marker and putting it on the map
      var customIcon = L.icon({
         iconSize:     [38, 40], // size of the icon
         iconAnchor:   [10, 40], // point of the icon which will correspond to marker's location
         popupAnchor:  [5, -40] // point from which the popup should open relative to the iconAnchor
      });
      var marker = L.marker(place.coordinate, {icon: customIcon});
      marker.addTo(map_var).bindPopup(place.Indirizzo);
   });
});

If you read and iterate the data correctly all you need is to adapt your code and assign the markers. Include the required libraries such as jQuery and place the file under "/resources" so it can be read.

The code to define customIcon should be outside the loop and function as its definition is constant:

// Creating a marker and putting it on the map
var customIcon = L.icon({
   iconUrl: 'https://leafletjs./examples/custom-icons/leaf-green.png',
   iconSize: [38, 40],
   iconAnchor: [10, 40],
   popupAnchor: [5, -40]
});

$.getJSON( "bike_coordinate.json", function(json1) {
   for (var i = 0; i < json1.length; i++) {
      var place = json1[i];
      var marker = L.marker(place.coordinate, {icon: customIcon});
      marker.addTo(map_var).bindPopup(place.Indirizzo);
   }
});

本文标签： javascriptHow do I read a JSON file with coordinates and plot them on a mapStack Overflow