LoginSignup
1

More than 5 years have passed since last update.

Leaflet.js を使って GeoJSON データを地図上に表示してみる その2

Last updated at Posted at 2018-05-22

Leaflet.js を使って GeoJSON データを地図上に表示してみる その1 - Qiita
で下ごしらえしたGeoJSONファイルを使用

JavaScript

index.js
//. 掛川城の緯度経度(初期位置)
var lat = 34.77530283508074;
var lng = 138.01500141620636;

var map = null;
var marker = null;

$(function () {
  //. 掛川城を中心とした地図を OpenStreetMap データで表示
  map = L.map('map').setView([lat, lng], 15);
  L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="http://openstreetmap.org/">OpenStreetMap</a>',
      maxZoom: 18
    }
  ).addTo(map);

  $.getJSON('./convertcsv.geojson', function (data) {
    var geojson = L.geoJson(data, {
      onEachFeature: function (feature, layer) {
        var field = '名称: '+feature.properties.name+ '<br>'+
        '住所: '+feature.properties.address+ '<br>'+
        '電話番号: '+feature.properties.tel+ '<br>'+
        '<a href="'+feature.properties.url+ '" target="_blank">ホームページ</a>';

        layer.bindPopup(field);
      }
    });
    geojson.addTo(map);
  });
});

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1