Commit 063de9d4 authored by Julien Fastré's avatar Julien Fastré

upgrade to leaflet 1.1

parent 525b06d2
No preview for this file type
No preview for this file type
......@@ -2,8 +2,8 @@
<html lang="fr">
<head>
<title>Ma carte</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
<style>
#map {
height: 90vh;
......
......@@ -2,8 +2,8 @@
<html lang="fr">
<head>
<title>Ma carte</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.7.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v4.2.0/build/ol.js" type="text/javascript"></script>
<style>
#map {
......
......@@ -2,11 +2,14 @@
<html lang="fr">
<head>
<title>Markers avec cluster</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster-src.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
<!-- ajout de la bibliothèque markercluster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.6/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.6/MarkerCluster.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.6/MarkerCluster.Default.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<style>
#map {
......
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ma carte</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet-src.js"></script>
<title>Ma carte avec leafletjs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
<style>
#map {
height: 90vh;
......
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ma carte</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.7.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script>
<title>Ma carte avec OpenLayers</title>
<link rel="stylesheet" href="http://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v4.2.0/build/ol.js" type="text/javascript"></script>
<style>
#map {
......
......@@ -2,8 +2,8 @@
<html lang="fr">
<head>
<title>Mon premier pop-up avec Leaflet</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
<style>
#map {
height: 90vh;
......@@ -19,13 +19,13 @@
<script type="text/javascript">
var map = L.map('map', {center: [44.0918144, 6.2351431,], zoom: 10});
var map = L.map('map', {center: [44.07331, 6.18101], zoom: 14});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: "Map data &copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a> contributors"
}).addTo(map);
L.marker([44.0967893, 6.2391226]).bindPopup('<p>Ici, c\'est Udos</p>').addTo(map).openPopup();
L.marker([44.07331, 6.18101]).bindPopup('<p>Ici, c\'est Udos</p>').addTo(map).openPopup();
</script>
......
......@@ -2,8 +2,8 @@
<html lang="fr">
<head>
<title>Un popup avec openlayers</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.7.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v4.2.0/build/ol.js" type="text/javascript"></script>
<style>
#map {
......@@ -27,8 +27,8 @@ var map = new ol.Map({
})
],
view: new ol.View({
center: ol.proj.transform([6.2351431, 44.0918144], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
center: ol.proj.transform([6.18101, 44.07331], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
})
});
......@@ -48,7 +48,7 @@ var icon_style = new ol.style.Style({
//create one feature
var feature = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.transform([6.2391226, 44.0967893], 'EPSG:4326', 'EPSG:3857')
ol.proj.transform([6.18101, 44.07331], 'EPSG:4326', 'EPSG:3857')
),
name: 'udos'
});
......
......@@ -2,8 +2,8 @@
<html lang="fr">
<head>
<title>Dessiner un polygon avec Leaflet</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
<style>
#map {
height: 90vh;
......@@ -19,7 +19,7 @@
<script type="text/javascript">
var map = L.map('map', {center: [44.0918144, 6.2351431,], zoom: 10});
var map = L.map('map', {center: [44.0918144, 6.2351431,], zoom: 16});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: "Map data &copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a> contributors"
......@@ -38,7 +38,7 @@ var square = [
new L.LatLng(44.0944887, 6.2381489)
];
L.polygon(square, {
var polygon = L.polygon(square, {
color: 'blue',
stroke: true,
fill: true,
......
......@@ -2,8 +2,8 @@
<html lang="fr">
<head>
<title>Click sur carte avec leaflet</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
<style>
#map {
height: 90vh;
......@@ -31,8 +31,17 @@ map.on('click', function(event) {
latlng = event.latlng;
marker = L.marker(latlng);
marker.bindPopup('Vous avez cliqu&eacute; sur lat: '+ latlng.lat + ' lon: ' + latlng.lng);
// note: il faut ajouter le marker à la carte **avant** d'ouvrir le popup
marker.addTo(map);
marker
.bindPopup('Vous avez cliqu&eacute; sur lat: '+ latlng.lat + ' lon: ' + latlng.lng)
.openPopup();
// une autre méthode, sans créer de marker
//popup = L.popup()
// .setLatLng(event.latlng)
// .setContent('Vous avez cliqu&eactue; sur lat: ' + latlng.lat + ' lon: ' + latlng.lng)
// .openOn(map);
});
......
......@@ -2,9 +2,10 @@
<html lang="fr">
<head>
<title>Geojson avec leaflet</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
<!-- Si vous utilisez jQuery, il faudra inclure la librairie -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> -->
<style>
#map {
height: 90vh;
......@@ -26,9 +27,19 @@ L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: "Map data &copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a> contributors"
}).addTo(map);
jQuery.getJSON('data/parkings_velos_a_dignes.geojson', function (data) {
window.fetch('data/parkings_velos_a_dignes.geojson').then(function(response) {
return response.json();
}).then(function(geojson) {
L.geoJson(geojson).addTo(map);
});
// en utilisant jQuery
/*
jQuery.getJSON('data/parkings_velos_a_dignes.geojson', function (data) {
L.geoJson(data).addTo(map);
});
*/
</script>
......
......@@ -2,11 +2,13 @@
<html lang="fr">
<head>
<title>Markers avec cluster</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster-src.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
<!-- ajout de la bibliothèque markercluster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.6/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.6/MarkerCluster.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.6/MarkerCluster.Default.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<style>
#map {
......@@ -31,6 +33,23 @@ L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
var clustered_markers = new L.MarkerClusterGroup();
window.fetch('data/parkings_velos_a_dignes.json')
.then(function(response) {
return response.json();
})
.then(function(json) {
var max, parkings = json.elements;
for (let i=0, max = parkings.length; i < max; i = i+1) {
let m = new L.Marker([parkings[i].lat, parkings[i].lon]);
clustered_markers.addLayer(m);
}
});
map.addLayer(clustered_markers);
// en utilisant jQuery
/*
jQuery.getJSON('data/parkings_velos_a_dignes.json', function (data) {
var i = 0,
max,
......@@ -41,7 +60,8 @@ jQuery.getJSON('data/parkings_velos_a_dignes.json', function (data) {
clustered_markers.addLayer(m);
}
});
map.addLayer(clustered_markers);
*/
</script>
</body>
......@@ -2,11 +2,13 @@
<html lang="fr">
<head>
<title>Markers avec cluster et icones</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster-src.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
<!-- ajout de la bibliothèque markercluster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.6/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.6/MarkerCluster.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.6/MarkerCluster.Default.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<style>
#map {
......@@ -37,6 +39,22 @@ var bike_icon = new L.Icon({
shadowSize: [20, 20]
});
window.fetch('data/parkings_velos_a_dignes.json')
.then(function(response) {
return response.json();
})
.then(function(json) {
var max, parkings = json.elements;
for (let i=0, max = parkings.length; i < max; i = i+1) {
let m = new L.Marker([parkings[i].lat, parkings[i].lon], {icon: bike_icon} );
clustered_markers.addLayer(m);
}
});
map.addLayer(clustered_markers);
/*
jQuery.getJSON('data/parkings_velos_a_dignes.json', function (data) {
var i = 0,
max,
......@@ -49,5 +67,6 @@ jQuery.getJSON('data/parkings_velos_a_dignes.json', function (data) {
});
map.addLayer(clustered_markers);
*/
</script>
</body>
......@@ -2,12 +2,14 @@
<html lang="fr">
<head>
<title>Markers avec cluster et icones</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster-src.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.js"></script>
<!-- ajout de la bibliothèque markercluster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.6/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.6/MarkerCluster.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.6/MarkerCluster.Default.css" />
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> -->
<style>
#map {
height: 90vh;
......@@ -37,6 +39,22 @@ var bike_icon = new L.Icon({
shadowSize: [20, 20]
});
window.fetch('data/parkings_velos_a_dignes.json')
.then(function(response) {
return response.json();
})
.then(function(json) {
var max, parkings = json.elements;
for (let i=0, max = parkings.length; i < max; i = i+1) {
let m = new L.Marker([parkings[i].lat, parkings[i].lon], {icon: bike_icon} );
clustered_markers.addLayer(m);
}
});
map.addLayer(clustered_markers);
/*
jQuery.getJSON('data/parkings_velos_a_dignes.json', function (data) {
var i = 0,
max,
......@@ -49,7 +67,8 @@ jQuery.getJSON('data/parkings_velos_a_dignes.json', function (data) {
});
map.addLayer(clustered_markers);
*/
L.control.layers({"Base map": tile}, {"Parkings vélos": clustered_markers}).addTo(map);
L.control.layers({"Base map": tile}, {"Parkings v&eacute;los": clustered_markers}).addTo(map);
</script>
</body>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment