ES:OpenLocalMap

From OpenStreetMap Wiki
Jump to: navigation, search
Idiomas disponibles — OpenLocalMap
Afrikaans Alemannisch aragonés asturianu azərbaycanca Bahasa Indonesia Bahasa Melayu Bân-lâm-gú Basa Jawa Baso Minangkabau bosanski brezhoneg català čeština dansk Deutsch eesti English español Esperanto estremeñu euskara français Frysk Gaeilge Gàidhlig galego Hausa hrvatski Igbo interlingua Interlingue isiXhosa isiZulu íslenska italiano Kiswahili Kreyòl ayisyen kréyòl gwadloupéyen kurdî latviešu Lëtzebuergesch lietuvių magyar Malagasy Malti Nederlands Nedersaksies norsk norsk nynorsk occitan Oromoo oʻzbekcha/ўзбекча Plattdüütsch polski português română shqip slovenčina slovenščina Soomaaliga suomi svenska Tiếng Việt Türkçe Vahcuengh vèneto Wolof Yorùbá Zazaki српски / srpski беларуская български қазақша македонски монгол русский тоҷикӣ українська Ελληνικά Հայերեն ქართული नेपाली मराठी हिन्दी অসমীয়া বাংলা ਪੰਜਾਬੀ ગુજરાતી ଓଡ଼ିଆ தமிழ் తెలుగు ಕನ್ನಡ മലയാളം සිංහල ไทย မြန်မာဘာသာ ລາວ ភាសាខ្មែរ ⵜⴰⵎⴰⵣⵉⵖⵜ አማርኛ 한국어 日本語 中文(简体)‎ 吴语 粵語 中文(繁體)‎ ייִדיש עברית اردو العربية پښتو سنڌي فارسی ދިވެހިބަސް
OpenLocalMap
Screenshot of OpenLocalMap
Autores: KonfrareAlbert, Yopaseopor y otros contribuidores.
Licencia: GNU General Public License
Plataformas: Windows, Linux y macOS
Versión: 1.0 (2018-01-27)
Lenguajes: catalán y español
Sitio web: https://github.com/OSM-Catalan/openlocalmap
Lenguaje de programación: JavaScript

Mapa basado en OSM configurable y personalizable

OpenLocalMap (sitio web) es un proyecto que permite ofrecer un portal basado en los datos y mapa de OpenStreetMap centrado en una zona determinada, con el añadido de una fácil personalización y puesta en marcha desde un fork en Github.

Olm 2018 01 27.jpg

Principales características

  • Fácil personalización.
  • Fácil puesta en marcha
  • Versión en español y en catalán.
  • Posibilidad de configurar otros servicios como Wikipedia, Disqus, Iframes externos.
  • Capas diferentes a través de Leaflet
  • Basado en OSM-POIs de Manuel Kaufmann (Humitos)
  • Mapa centrado en la localidad (y con posibilidad de cambios de capas) (OpenStreetMap y Leaflet)
  • Muestra de PDI (Puntos de Interés, vamos, nuestros POIs) (Overpass)
  • Búsqueda en la localidad o bien en el resto del mundo (Nominatim)
  • Imágenes de Mapillary (en construcción) (Mapillary) (en reformulación)
  • Recorridos personalizados por el municipio (Graphhopper)
  • Artículos sobre la localización (Wikipedia)
  • Mapa concreto , exterior , personalizable (ejemplo aparcamiento Overpass)
  • Enlaces (explica otros proyectos de OSM, personalizable 100%)
  • Modo experto (en construcción) (iD)
  • Explicación de todo el proyecto (personalizable 100%)

Procedimiento

Para hacerlo fácil partiremos de un "fork", la replicación de un proyecto, para su mejora o reproducción en Github. A partir de aquí tú y solo tú tendrás control sobre TU proyecto, desde tu cuenta de Github.

  1. Vamos a https://github.com/osm-catalan/openlocalmap y de allí hacemos un fork.
  2. Cambiamos del nombre al proyecto , con alguna referencia a la población sobre la que queremos que se centre el mapa. sustituiremos la ciudad de ejemplo "Vilanova i la Geltrú" así como sus coordenadas. ([41.2214 , 1.7169], 15); (el 15 es el zoom base que usaremos).
  3. Cambiar todas las direcciones internas que hagan referencias al nombre del proyecto en base al vuestro escogido (se recomenda olm-xxx) .
  4. Modificar como base dos archivos principalmente (mínimos):

index.html

  • El primero es index.html, el índice del mapa, el que contiene la guía al contenido estático.

Guía: buscar la cadena "MODIFICAR AQUÍ".

  • Cambio de nombre

   <title>OpenStreetMap - Vilanova i la Geltrú</title>

  • Cambio de nombre

<meta property="og:title" content="OpenStreetMap - Vilanova i la Geltrú" />

  • Cambio de URL   

<meta property="og:url" content="https://osm-catalan.github.io/openlocalmap" />

  • Personalización de miniatura

<meta property="og:image" content="https://osm-catalan.github.io/openlocalmap/assets/img/preview.jpg" />

  • Cambio de nombre   

<meta property="og:description" content="Mapa de Vilanova i la Geltrú amb cerca de punts d'interès i altra informació." />

  • Añadir secciones en el menú, los dibujitos son Font Awesome Icons.

<li><a href="#parking" role="tab"><i class="fa fa-car"></i></a></li>

  • Cambio de nombre 

<h1>Cerca local<br><small>a Vilanova i la Geltrú</small></h1>

  • Cambio de nombre 

<p style="text-align:justify; margin-right:5px;">Des d'aquesta secció podeu fer cerques tan

          limitades a la zona de Vilanova i la Geltrú (cerca local) com a qualsevol lloc del Món. Per fer-ho

           cal introduir la vostra cerca a la caixa:</p>

(No sólo debes modificar el nombre de las rutas. Debes fabricarte las tuyas propias con Graphhopper, seleccionas recorrido y le das al botón de GPX después. El archivo restante lo subes a la carpeta assets/gpx de tu proyecto, sustituyendo los ya existentes. Y si quieres añadir alguno extra, copia una opción de las ya existentes en el código modificando lo que desees)

<option value='assets/gpx/track001.gpx' select>La Talaia</option>

<option value='assets/gpx/track002.gpx' select>Puig de l'Àliga</option>

<option value='assets/gpx/track003.gpx'>El Montgrós</option>

<option value='assets/gpx/track003.gpx'>Camí de Ronda de VNG a Sitges</option>

  • Cambio de nombre 

<h1>Vilanova i la Geltrú a la Viquipèdia</h1>

  • Cambio de categoría de Wikipedia  

<p><iframe name="Wikiciutat" width="100%" height="25000px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://ca.m.wikipedia.org/w/index.php?title=Categoria:Vilanova_i_la_Geltrú&mobileaction=toggle_view_mobile"></iframe>

  • Cambio de código de Disqus

  <h1>Comentaris</h1>

  • Mapa personalizado de Overpass, se consigue generando una consulta y dándole a "Exportar Mapa interactivo", copiando la URL kilométrica resultante que suele contener toda la consulta en sí.  

<p><iframe name="Aparcament" width="300px" height="400px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://overpass-turbo.eu/map.html?Q=%2F*%0AThis%20has%20been%20generated%20by%20the%20overpass-turbo%20wizard.%0AThe%20original%20search%20was%3A%0A%E2%80%9Cparking%3Acondition%3Aright%3Aresidents%3D*%E2%80%9D%0A*%2F%0A%5Bout%3Ajson%5D%5Btimeout%3A25%5D%3B%0A%2F%2F%20gather%20results%0A(%0A%20%20%2F%2F%20query%20part%20for%3A%20%E2%80%9C%22parking%3Acondition%3Aright%3Aresidents%22%3D*%E2%80%9D%0A%20%20node%5B%22parking%3Acondition%3Aright%3Aresidents%22%5D(41.21222998725971%2C1.7167532444000244%2C41.21716119922773%2C1.725325584411621)%3B%0A%20%20way%5B%22parking%3Acondition%3Aright%3Aresidents%22%5D(41.21222998725971%2C1.7167532444000244%2C41.21716119922773%2C1.725325584411621)%3B%0A%20%20%0A%20%20%20%20way%5B%22parking%3Acondition%3Aleft%3Aresidents%22%5D(41.21222998725971%2C1.7167532444000244%2C41.21716119922773%2C1.725325584411621)%3B%0A%20%20%0A%20%20%20%20%20%20way%5B%22parking%3Acondition%3Aright%3Aresidents%22%5D(41.21222998725971%2C1.7167532444000244%2C41.21716119922773%2C1.725325584411621)%3B%0A%20%20%0A%20%20%20%20%20%20way%5B%22parking%3Acondition%3Aboth%22%5D(41.21222998725971%2C1.7167532444000244%2C41.21716119922773%2C1.725325584411621)%3B%0A%20%20%0A%20%20%20%20%20%20%20%20way%5B%22amenity%22%3D%22parking%22%5D(41.21222998725971%2C1.7167532444000244%2C41.21716119922773%2C1.725325584411621)%3B%0A%20%20%0A%20%20%20%20%20%20%20%20%20%20way%5B%22parking%3Alane%3Aboth%22%3D%22no_stopping%22%5D(41.21222998725971%2C1.7167532444000244%2C41.21716119922773%2C1.725325584411621)%3B%0A%0A)%3B%0A%2F%2F%20print%20results%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0Aout%20body%3B%0A%0A%3E%3B%0A%0Aout%20skel%20qt%3B%7B%7Bstyle%3A%20%20%0A%0Away%5Bamenity%3Dparking%5D%7B%0A%0A%20%20icon-width%3A%2020%3B%0A%0A%20%20icon-image%3A%20url(%27https%3A%2F%2Fgithub.com%2Fyopaseopor%2Fbeta_style_josm%2Fraw%2Fmaster%2Ftraffic_signs_EUR%2FES%2FES_S17.png%27)%3B%0A%0A%20%20text%3A%20name%3B%0A%0A%7D%0A%0Away%5Bparking%3Acondition%3Aleft%3Dticket%5D%5Bparking%3Acondition%3Aleft%3Aresidents%3Dfree%5D%7B%0A%0A%20%20color%3Alime%3B%0A%0A%20%20opacity%3A0.5%3B%0A%0A%20%20%20%20text%3A%20wheelchair%3Adescription%3B%0A%20%20%0A%7D%0A%0Away%5Bparking%3Acondition%3Aright%3Dticket%5D%5Bparking%3Acondition%3Aright%3Aresidents%3Dfree%5D%7B%0A%0A%20%20color%3Agreen%3B%0A%0A%20%20opacity%3A0.5%3B%0A%0A%20%20%20%20text%3A%20wheelchair%3Adescription%3B%0A%20%20%0A%7D%0A%0Away%5Bparking%3Acondition%3Aboth%3Dticket%5D%5Bparking%3Acondition%3Aboth%3Aresidents%3Dfree%5D%7B%0A%0A%20%20color%3Ateal%3B%0A%0A%20%20opacity%3A0.5%3B%0A%0A%20%20%20%20text%3A%20wheelchair%3Adescription%3B%0A%20%20%0A%7D%0A%0Away%5Bparking%3Alane%3Aboth%3Dno_stopping%5D%7B%0A%0A%20%20color%3Ayellow%3B%0A%0A%20%20opacity%3A0.5%3B%0A%0A%20%20%20%20text%3A%20wheelchair%3Adescription%3B%0A%20%20%0A%7D%0A%0A%20%20%7D%7D"></iframe>

  • Modificar localización , y cambio de nombre del mapa f4map  

<p style="text-align:justify; margin-right:5px;"><img hpace="5px" width="75px" height="75px" align="right" src="assets/img/f4map.png">El lloc web (demo) d'<b>F4Map</b> us permet recrear un escenari d'OpenStreetMap en 3D. A les opcions gràfiques hi podreu seleccionar opcions com utilitzar les dades d'elevació del terreny, l'hora del dia o les condicions climatològiques. El navegador web ha de ser capaç de treballar amb <a href="https://www.khronos.org/webgl/" target="_blank">WebGL</a> per la correcta visualització.<br><br><img width="100%" src="assets/img/f4map-imatge.png"><center><a href="https://demo.f4map.com/#lat=41.2213651&lon=1.7190071&zoom=17&camera.theta=58.483" target="_blank">Ves al mapa de Vilanova i la Geltrú en 3D</a></center></p>

  • Modificar toda la sección de créditos a vuestro gusto.  

<h1>Quant a...</h1>

assets/js/site.js

  • Modificar coordenadas

map.setView([41.2214 , 1.7169], 15);

  • Modificar coordenadas y nivel de zoom (no disminuir, en todo caso aumentar)

    map.setView([41.2214 , 1.7169], 15);

  • Modificar límites de Nominatim para buscar en local

    $.getJSON('https://nominatim.openstreetmap.org/search?format=json&viewbox=1.68434,41.23761,1.76502,41.20533&bounded=1&limit=5&q=' + inp.value, function(data) {

Pues bien, más allá de lo que puedas remover, si quieres ya tienes tu prueba de concepto personalizada, un mapa de OSM, adaptado a tu localidad con muchos servicios y con más que le puedas añadir pues el ecosistema de esta base de datos llamada OpenStreetMap es tan infinito como sus posibilidades ;)

Contacto

No dudes en contactar con osm-catalan para más información.

Véase también