Patricio Soriano :: sigdeletras.com
Junio'16
Crear un visor web con información sobre los servicios escolares de Córdoba (España). Los datos proceden del DERA de la Junta e información de la Consejería de Educación.
- Visor a pantalla completa y diseño adaptado
- Límites de zum máximo y mínimo y límites geográficos del municipio de Córdoba
- Control de capas base y vectoriales
- Capas base: OSM y WMS del PNOA
- Capas vectoriales: centros escolares públicos, privados y zonas verdes (OSM)
- Información al pinchar sobre el centro
- Simbología puntual y poligonal
- Escala
- Extensiones: buscador de calles, gelocalización, zum y coordenadas en la URL
- Botón zum extensión municipio
Carpetas
Ficheros
- index.html
- assets/js/map.js
- assets/css/map.css
- Herramientas: Sublime Text, Atom...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui' />
<title>Taller de Leaflet</title>
</head>
<body>
<div id='map'></div>
</body>
</html>
Localizar URL de los recursos externo y atención a las versiones
<!DOCTYPE html>
<html>
<head>
...
<script src='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet-src.js'></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<link href='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css' rel='stylesheet' />
<link rel="stylesheet" href="assets/css/map.css">
...
</head>
<body>
<div id='map'></div>
<script src="assets/js/map.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
- Doc Map
- Doc TileLayer
- Ejemplos de Tile maps Leaflet-providers
var map = L.map('map', {
center: [37.88437176085360, -4.779524803161621],
zoom: 13,
minZoom: 10,
maxZoom: 18,
maxBounds: [[37.65882,-5.01595], [38.03836,-4.33411]]
});
var basemapOSM = L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
basemapOSM.addTo(map);
- Información vectorial Leaflet Quick Start Guide
- Wikipedia GeoJSON
- Herramientes: GeoWE, geojson.io, Instamap, uMap...
var centros = L.geoJson(null);
centros.getAttribution = function() {
return 'Fuente: <a href="http://www.juntadeandalucia.es/institutodeestadisticaycartografia/DERA/" target="_blank">IECA</a>';
};
$.getJSON("data/centros_educativos.geojson", function (data) {
centros.addData(data);
});
centros.addTo(map);
var baseMaps = {
"OSM": basemapOSM
};
var overlayMaps = {
"Centros educativos": centros
};
L.control.layers(baseMaps, overlayMaps,{
position: 'topright', // 'topleft', 'bottomleft', 'bottomright'
collapsed: false // true
}).addTo(map);
L.control.scale({
imperial: false
}).addTo(map);
Datos Consulta parques y jardines en Overpass Turbo
Catálogo de WMS IDEE
var Spain_PNOA_Ortoimagen = L.tileLayer.wms('http://www.ign.es/wms-inspire/pnoa-ma', {
layers: 'OI.OrthoimageCoverage',
format: 'image/png',
transparent: false,
continuousWorld : true,
attribution: 'PNOA cedido por © <a href="http://www.ign.es/ign/main/index.do" target="_blank">Instituto Geográfico Nacional de España</a>'
});
....
var zonasverdes = L.geoJson(null);
$.getJSON("data/parques_osm.geojson", function (data) {
zonasverdes.addData(data);
});
var baseMaps = {
"OSM": basemapOSM,
"PNOA": Spain_PNOA_Ortoimagen
};
var overlayMaps = {
"Centros educativos": centros,
"Zonas Verdes" : zonasverdes
};
En index.html Importante!!!
<meta charset="utf-8">
function centrosInfoPopup(feature, layer) {
layer.bindPopup( "<h4>" + feature.properties.nombre + "</h4><hr>"+"<strong> Tipo: </strong>"+feature.properties.tipo+"<br/>"+ "<strong> Gestión: </strong>"+feature.properties.gestion+"<br/>"+ "<strong> Domicilio: </strong>"+feature.properties.direccion+"<br/>"+ "<strong> Localidad: </strong>"+feature.properties.localidad+"<br/>"+ "<strong> Teléfono: </strong>"+feature.properties.tlfno+"<br/>"+ "<strong> Enseñanza: </strong>"+feature.properties.enseñanza+"<br/>"+ "<strong> Servicios: </strong>"+feature.properties.servicios+"<br/>"+ "<strong> Bilingüe: </strong>"+feature.properties.bilingüe+"<br/>");
}
var centros = L.geoJson(null, {
onEachFeature: centrosInfoPopup,
});
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.leaflet-popup-content {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 22px;
}
- Style path
function estiloZonasVerdes(feature) {
return {
//weight: 3.3,
color: 'green',
opacity: 0.6,
fillOpacity: 0.5
};
};
var zonasverdes = L.geoJson(null,{
style : estiloZonasVerdes,
});
function estiloCircleMarker(feature, latlng) {
return L.circleMarker(latlng, {
radius: 5.0,
fillColor: 'red',
color: '#FFFFFF',
weight: 2,
opacity: 1.0,
fillOpacity: 1.0
})
}
var centros = L.geoJson(null, {
onEachFeature: centrosInfoPopup,
pointToLayer: estiloCircleMarker,
});
function colorGestion(g) {
return g == 'Público' ? 'blue' :
g == 'Privado' ? 'orange' :
'red';
}
function estiloCircleMarker(feature, latlng) {
return L.circleMarker(latlng, {
radius: 5.0,
//fillColor: 'red',
fillColor: colorGestion(feature.properties.gestion),
color: '#FFFFFF',
weight: 2,
opacity: 1.0,
fillOpacity: 1.0
})
}
var centros_privado = L.geoJson(null, {
onEachFeature: centrosInfoPopup,
pointToLayer: estiloCircleMarker,
filter: function(feature, layer) {
return feature.properties.gestion == "Privado";
}
});
En index.html
<script src="http://smeijer.github.io/L.GeoSearch/src/js/l.control.geosearch.js"></script>
<script src="http://smeijer.github.io/L.GeoSearch/src/js/l.geosearch.provider.openstreetmap.js"></script>
<link rel="stylesheet" href="http://smeijer.github.io/L.GeoSearch/src/css/l.geosearch.css" />
En map.js
var buscaCalle = new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.OpenStreetMap()
});
buscaCalle.addTo(map);
En index.html
<script src="http://mlevans.github.io/leaflet-hash/javascripts/leaflet-hash.js" type="text/javascript"></script>
En map.js
var hash = new L.Hash(map);
- leaflet-locatecontrol
En index.html
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://www.domoritz.de/leaflet-locatecontrol/dist/L.Control.Locate.min.css" />
<script src="https://www.domoritz.de/leaflet-locatecontrol/src/L.Control.Locate.js" ></script>
En map.js
var lc = L.control.locate({
strings: {
title: "Show me where I am, yo!"
}
}).addTo(map);
En index.hmtl
<body>
<div id='map'></div>
<div id='btn-zum'>
<button type="button">Zum extensión</button>
<script src="assets/js/map.js"></script>
</div>
</body>
En map.css
#btn-zum{
position: absolute;
top: 10px;
left: 60px;
z-index: 9000;
}
En map.js
$("#btn-zum").click(function() {
// map.fitBounds(centros.getBounds());
map.setView([37.88437176085360, -4.779524803161621], 11);
return false;
});
