googlemapの代わり

googlemapが有料になったのではてどうするか

Maps JavaScript APIだと月間2万8000リクエスト（1日平均933リクエスト）で課金される。

openstreetmap.orgで配布されている地図タイルを、LeafletやOpenLayersなどのJavascriptを使って読み込むことで、地図表示させることにした

leaflet.jsをつかう

<!doctype HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>leaflet-measure</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
  <link rel="stylesheet" href="leaflet-measure.css">
  <style>
    body {
      font-size: 20px;
      font-family: Helvetica, sans-serif;
      font-weight: 400;
      line-height: 1;
      color: #222;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
    body {
      margin: 0 20px 20px;
    }
    h1, h2 {
      margin: 20px 0 0;
      font-size: 1.4em;
      font-weight: normal;
      line-height: 1;
    }
    h1 {
      display: inline-block;
      font-size: 1.4em;
    }
    h2 {
      font-size: 1.1em;
    }
    pre {
      line-height: 1.5em;
    }
    p.github {
      display: inline-block;
      margin: 20px 0 0 20px;
      font-size: 1.2em;
    }
    a, a:visited, a:hover, a:active, a:focus {
      text-decoration: none;
    }
    #map {
      height: 1000px;
      margin: 20px 20px 0 0;
    }
  </style>
  <!-- plugin -->
    <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
<!-- plugin -->

    <style type="text/css">
     <!--
      #mapid { height: 100px; width: 600px}
    -->
    </style>
  </head>
  <body>
  <h1>leaflet-measure</h1>
  <p class="github"><a href="//github.com/ljagis/leaflet-measure">github.com/ljagis/leaflet-measure</a></p>
  <div id="map"></div>
  <h2><code>measurefinish</code> event data:</h2>
  <pre id="eventoutput">...</pre>
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
  <script src="leaflet-measure.js"></script>
  <script>
    (function(L, document) {
      var map = L.map('map', {
        center: [35.626389, 139.723472],
        zoom: 18,
        measureControl: true
      });
      L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
        minZoom: 6,
        maxZoom: 18,
        attribution: '© Esri — Sources: Esri, DigitalGlobe, Earthstar Geographics, CNES/Airbus DS, GeoEye, USDA FSA, USGS, Getmapping, Aerogrid, IGN, IGP, swisstopo, and the GIS User Community'
      }).addTo(map);

      map.on('measurefinish', function(evt) {
        writeResults(evt);
      });

      function writeResults(results) {
        document.getElementById('eventoutput').innerHTML = JSON.stringify(
          {
            area: results.area,
            areaDisplay: results.areaDisplay,
            lastCoord: results.lastCoord,
            length: results.length,
            lengthDisplay: results.lengthDisplay,
            pointCount: results.pointCount,
            points: results.points
          },
          null,
          2
        );
      }
    })(window.L, window.document);
  </script>
</body>
</html>

git
https://github.com/ljagis/leaflet-measure
https://leafletjs.com/plugins.html
https://rdrr.io/cran/leaflet/man/addMeasure.html

https://leafletjs.com/plugins.html
https://rdrr.io/cran/leaflet/man/addMeasure.html

参考
https://kita-note.com/leaflet-tutorial-1 　
http://www.nowhere.co.jp/blog/archives/20180705-160052.html