WFS geoJSON

Une carte + cadastre geoportail

by Thibault Coupin

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://raw.githubusercontent.com/Leaflet/Leaflet.draw/master/dist/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Leaflet/Leaflet.draw/master/dist/leaflet.draw.css">
<script src="https://rawgit.com/Leaflet/Leaflet.draw/master/dist/leaflet.draw.js"></script>
<input id="gppKey" placeholder="la clé géoportail">
<input type="button" onclick="mapMe()" value="Go!"><input type="button" onclick="geocode()" value="FindCity">
<hr>
<div id="map" class="map"></div>
<hr>

CSS

.map {
  height: 400px;
  width: 100%;
}

JavaScript

console.log("Chargement")
$("#gppKey").val(localStorage.getItem('gppKey'));

var geomLayer;
function onEachFeature(feature, layer) {
		var popupContent = "<table>";
		for (var i in feature.properties){
			popupContent += "<tr><td><b>"+i+"</b></td><td>"+feature.properties[i]+"</td></tr>";
		}
		popupContent += "</table>";
		layer.bindPopup(popupContent);
	}


window.mapMe = function() {
  var key = $("#gppKey").val()
  localStorage.setItem('gppKey', key)
  map = L.map('map').setView([48.845, 2.424], 10);
  L.tileLayer('https://wxs.ign.fr/' + key + '/wmts?service=WMTS&request=GetTile&version=1.0.0&layer={id}&style=normal&tilematrixSet=PM&format=image%2Fjpeg&height=256&width=256&tilematrix={z}&tilerow={y}&tilecol={x}', {
    maxZoom: 18,
    minZoom: 0,
    attribution: '<a href="http://www.ign.fr">IGN</a>',
    id: 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
    opacity: 0.5
  }).addTo(map);

  dataLayer = L.geoJson(null, {}).addTo(map);
  geomLayerGroup = new L.FeatureGroup();
  map.addLayer(geomLayerGroup);
  // Initialise the draw control and pass it the FeatureGroup of editable layers
  /*
  var drawControl = new L.Control.Draw({
    draw: {
      polyline: false,
      circle: false,
      polygon: false,
      rectangle: false
    },
    edit: {
      featureGroup: geomLayerGroup
    }
  });
  map.addControl(drawControl);

  map.on('draw:drawstart', function(e) {
    if (geomLayer !== undefined) {
      geomLayerGroup.removeLayer(geomLayer)
    }
    window.geomLayer = undefined
  });
  map.on('draw:created', function(e) {
    if (geomLayer !== undefined) {
      geomLayerGroup.removeLayer(geomLayer)
    }
    geomLayer = e.layer
    geomLayerGroup.addLayer(geomLayer);
    $("#lon").val(JSON.stringify(geomLayer.toGeoJSON().geometry.coordinates[0]))
    $("#lat").val(JSON.stringify(geomLayer.toGeoJSON().geometry.coordinates[1]))
    geocode()
  });
*/
}


window.geocode = function() {
  console.log("geocode")
  var key = $("#gppKey").val()
  $.ajax({
    url:...