Hola Jorge,

Aunque suene un poco a autopromoción te pongo el enlace a un artículo de mi
autoría sobre el tema:

http://aalih.cubava.cu/2015/04/17/instalando-un-servidor-local-de-openstreet
map/

Tengo un gran interés en los temas de GIS y desde hace un tiempo estoy
haciendo el esfuerzo porque seamos más los que nos dediquemos a ello, de ahí
que cada que vez que tengo un tiempo trato de escribir sobre el tema.

Cualquier duda o pregunta envíala a través de la lista para que las
respuestas que se den queden disponibles para otros interesados.

Saludos,
  Ali

Hola Jorge aquí te muestro el index del server de mapas basado en el tuto de
Ali, con algunos plugins de leaflet implementados:

<html>
   <head>
      <title>Mapa de Cuba</title>
      <link rel="shorcut icon" href="./favicon.png" type="image/ico">
      <link href="/js/leaflet/leaflet.css" rel="stylesheet">
      <link href="/js/leaflet/L.Control.MousePosition.css" rel="stylesheet">
      <link href="/js/leaflet/leaflet.draw.css" rel="stylesheet">
      <link href="/js/leaflet/Control.FullScreen.css" rel="stylesheet">
      <script type="text/javascript" src="/js/leaflet/leaflet.js"></script>
      <script type="text/javascript"
src="/js/leaflet/L.Control.MousePosition.js"></script>
      <script type="text/javascript"
src="/js/leaflet/leaflet.draw.js"></script>
      <script type="text/javascript"
src="/js/leaflet/Control.FullScreen.js"></script>
      <script type="text/javascript">
           function initmap() {
              var map = L.map('map', {drawControl: true}).setView([23.12248,
-82.3798], 11);
 
L.tileLayer('http://mapadecubaoffline/tiles/cuba-osm/{z}/{x}/{y}.png', {
                 maxZoom: 18
              }).addTo(map);
              L.control.fullscreen({position: 'topright', title: 'Show me
the fullscreen !', forceSeparateButton: false}).addTo(map)
              L.control.mousePosition().addTo(map);
              L.control.scale().addTo(map);

// Esto es para mostrar un marcador en pantalla     
                      var marker = L.marker([latitud,
-longitud]).addTo(map);
              marker.bindPopup("Muestra un mensaje cualquiera");
//no es necesario que la variable sea marker
                      var yo = L.marker([latitud, -longitud]).addTo(map);
              yo.bindPopup("Tambien funciona a la perfección");

// muestra un "cartel" con las coordenadas cuando clickeas en el mapa
var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("Coordenadas " + e.latlng.toString())
        .openOn(map);
}

map.on('click', onMapClick);

//este es el codigo para el draw.
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;
//esto es para hacer que cada marcador que insertes con el draw, haga alguna
accion determinada
    if (type === 'marker') {
        layer.bindPopup('Estas son pruebas!');
    }

    map.addLayer(layer);
    drawnItems.addLayer(layer);

});

                }
      </script>
      <style type"text/css">
          #map {height: 100%;}
      </style>
   </head>
   <body onload="initmap()">
       <div id="map"></div>
   </body>
</html>



______________________________________________________________________
Lista de correos del Grupo de Usuarios de Tecnologías Libres de Cuba.
Gutl-l@jovenclub.cu
https://listas.jovenclub.cu/cgi-bin/mailman/listinfo/gutl-l

Responder a