Ca:OpenLocalMap

From OpenStreetMap Wiki
Jump to navigation Jump to search
OpenLocalMap
Olm 2018 01 27.jpg
Autors: KonfrareAlbert, Yopaseopor i altres contribuïdors.
Llicència: GNU GPL
Plataformes: Windows, Linux, i macOS
Versió: 1.0 (2018-01-27)
Idiomes: català i espanyol
Lloc web: https://github.com/OSM-Catalan/openlocalmap
Llenguatge de programació: JavaScript

Mapa basat en OSM configurable i personalitzable

Features
Feature Value
Map Display
Display map yes
Map data raster;vector
Source online
Rotate map
3D view
Shows website
Shows phone number
Shows operation hours
Routing

(Not set)

Navigating

(Not set)

Tracking

(Not set)

Monitoring
Monitoring
Show current track
Open existing track yes
Altitude diagram
Show POD value
Satellite view
Show live NMEA data
Show speed
Send current position
Editing
Add POIs yes
Edit / Delete POIs yes
Add way yes
Edit geometries yes
Edit arbitrary tags of existing OSM objects yes
Edit relations yes
View notes
Create notes
Edit notes
Work offline online
Support imagery offset DB yes
Upload to OSM yes
Rendering

(Not set)

Accessibility
Accessibility support
Complete non graphics text output no
Braille interface no
Exploration modus
Public Transport mode
Danger Warnings
Screenreader
Screenreader languages

OpenLocalMap ( lloc web ) és un projecte que permet oferir un portal basat en les dades i mapa d'OpenStreetMap centrat en una zona determinada, amb l'afegit d'una fàcil personalització i posada en marxa des d'un fork en Github.

Principals característiques

  • Fàcil personalització.
  • Fàcil posada en marxa
  • Versió en espanyol i en català.
  • Possibilitat de configurar altres serveis com Wikipedia, Disqus, Iframes externs.
  • Capes diferents a través de Leaflet
  • Basat en OSM-POIs de Manuel Kaufmann (Humitos)
  • Mapa centrat en la localitat (i amb possibilitat de canvis de capes) (OpenStreetMap i Leaflet)
  • Mostra de PDI (Punts d'Interès, anem, els nostres POIs) (Overpass)
  • Cerca a la localitat o bé a la resta del món (nominatim)
  • Imatges de Mapillary (en construcció) (Mapillary) (en reformulació)
  • Recorreguts personalitzats pel municipi (Graphhopper)
  • Articles sobre la localització (Wikipedia)
  • Mapa concret, exterior, personalitzable (exemple aparcament Overpass)
  • Enllaços (explica altres projectes de OSM, personalitzable 100%)
  • Mode expert (en construcció) (iD)
  • Explicació de tot el projecte (personalitzable 100%)

Procediment

Per fer-ho fàcil partirem d'un "fork", la replicació d'un projecte, per a la seva millora o reproducció en Github. A partir d'aquí tu i només tu tindràs control sobre el TEU projecte, des del teu compte de Github.

  1. Anem a https://github.com/osm-catalan/openlocalmap i d'allí fem un fork.
  2. Canviem del nom al projecte, amb alguna referència a la població sobre la qual volem que se centri el mapa.substituirem la ciutat d'exemple "Vilanova i la Geltrú" així com les seves coordenades. ([41.2214, 1.7169], 15); (El 15 és el zoom base que farem servir).
  3. Canviar totes les direccions internes que facin referències al nom del projecte sobre la base del vostre escollit (es recomanacions olm-xxx).
  4. Modificar com a base dos arxius principalment (mínims):

index.html

  • El primer és index.html, l'índex del mapa, el que conté la guia al contingut estàtic.

Guia: buscar la cadena "MODIFICAR AQUÍ".

  • Canvi de nom

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

  • Canvi de nom

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

  • Canvi d'URL

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

  • Personalització de miniatura

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

  • Canvi de nom

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

  • Afegir seccions al menú, els dibuixets són Font Awesome Icons.

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

  • Canvi de nom

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

  • Canvi de nom

<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 només has de modificar el nom de les rutes. Has de fabricar-te les teves pròpies amb Graphhopper, selecciones recorregut i li dones al botó de GPX després. L'arxiu restant el puges a la carpeta assets / gpx del teu projecte, substituint els ja existents. I si vols afegir algun extra, copia una opció de les ja existents en el codi modificant el que desitgis)

<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>

  • Canvi de nom

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

  • Canvi de categoria 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>

  • Canvi de codi de Disqus

<h1>Comentaris</h1>

  • Mapa personalitzat de Overpass, s'aconsegueix generant una consulta i donant-li a "Exportar Mapa interactiu", copiant la URL quilomètrica resultant que sol contenir tota la consulta en si.

<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 localització, i canvi de nom 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 tota la secció de crèdits al vostre gust.

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

assets/js/site.js

  • Modificar coordenades

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

  • Modificar coordenades i nivell de zoom (no disminuir, en tot cas augmentar)

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

  • Modificar límits de nominatim per 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) {

Doncs bé, més enllà del que puguis remenar, si vols ja tens la teva prova de concepte personalitzada, un mapa de OSM, adaptat a la teva localitat amb molts serveis i amb més que li puguis afegir doncs l'ecosistema d'aquesta base de dades anomenada OpenStreetMap és tan infinit com les seves possibilitats;)

Contacte

No dubtis a contactar amb osm-català per a més informació.

Vegeu també