Reverse adresse premium
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!">
<hr>
<div id="map" class="map"></div>
<hr>
<input id="lon" placeholder="lon" size="3">
<input id="lat" placeholder="lat" size="3">
<input type="button" onclick="geocode()" value="Find">
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);
L.tileLayer('https://wxs.ign.fr/' + key + '/wmts?service=WMTS&request=GetTile&version=1.0.0&layer={id}&style=bdparcellaire&tilematrixSet=PM&format=image%2Fpng&height=256&width=256&tilematrix={z}&tilerow={y}&tilecol={x}', {
maxZoom: 20,
minZoom: 0,
attribution: '<a href="http://www.ign.fr">IGN</a>',
id: 'CADASTRALPARCELS.PARCELS',
opacity: 1
}).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) {
...