OpenStreetMap Resources for Web Developers === **Programming resources from lowcode - like adding a location plan to your website or create a web map with POIs without own server - up to simple scripting with HTML, CSS and Javascript** _Authors: Stefan Keller, OST/SOSM ([contact](https://sosm.ch/de/kontakt/)), with awesome help from Ciro Brodmann, Markus Peloso and others. March 2023. Document license CC0 1.0._ # Overview This document provides web developers as well as front-end and software engineers with a quick start with OpenStreetMap resources. It focuses on client side web applications - i.e. web apps without a custom backend - and it's slightly Swiss biased. Main use cases are: 1. Adding a location plan (avenue) of your business to your website (**'Location Plan'**) 2. Creating an interactive web map with POIs (**'POI Map'**).  _Figure 0: Left: Location Plan of OST-Campus RJ. Right: POI Map showing table tennis tables around Hombrechtikon._ This document isn't a tutorial but it gives examples, blueprints and links. It suits people with beginner or intermediate knowledge of HTML and CSS and a little knowledge of JavaScript. :::info **Looking for adding a map with JavaScript programming**? See e.g. this [Collection of plugins for using D3.js with Leaflet]( https://github.com/bluehalo/leaflet-d3). ::: Those who already know OpenStreetMap and Geographic Information Systems (GIS) can skip the next chapter "About OpenStreetMap (OSM) and Geographic Information Systems". Quickly jump to examples or demo projects using the table below: | | Location Plan | POI Map | Programming | |-------------------|:----------------:|:----------------:|----------------| | **OSM Standard** | [View example ↓](#…-using-a-HTML-ltiframegt) | Not possible! | HTML | | **uMap** | [View example ↓](#…-using-a-HTML-ltiframegt) | [View example ↓](#…-using-uMap-web-application) | HTML | | **JS Leaflet** | [View demo project ↓](#…-and-Leaflet) | [View demo project ↓](#…-and-Leaflet1) | JavaScript | | **JS OpenLayers** | [View demo project ↓](#…-and-OpenLayers) | [View demo project ↓](#…-and-OpenLayers1) | JavaScript | | **JS Vue-Leaflet**| [View demo project ↓](#…-and-Vue-Leaflet) | [View demo project ↓](#…-and-Vue-Leaflet1) | JavaScript, VueJS | _Table: Location plan and POI map and its implementation examples._ :::info ***What is Leaflet and OpenLayers?*** Both are JavaScript libraries for interactive maps where developers can easily access third-party base maps and user-defined map source, like GeoJSON or web maps services. Both are open-source and mobile-friendly. There are other alternatives but [Leaflet](https://leafletjs.com/) is the most well known. ::: # About OpenStreetMap (OSM) and Geographic Information Systems **OpenStreetMap (OSM)** is the Wikipedia of maps: www.openstreetmap.org (www.osm.org). It is the largest crowdsourced citizen science spatial (vector) data project in the world. In recent years, OSM has become the best alternative to Google Maps in many ways, such as route planning and all this while preserving privacy. And it is a goldmine of 1001 points-of-interest (POI); see e.g. this article on the [Nutzen von OpenStreetMap im Tourismus](https://md.coredump.ch/s/r1BpwhVO8#) (in german). For learning about concepts of OSM, and tools (like iD Editor, tagfinder, taginfo) see [OpenSchoolMaps](https://openschoolmaps.ch/pages/materialien.html#openstreetmap-bearbeiten-und-nutzen) or [LearnOSM](https://learnosm.org/). And of course we assume you already have edited OpenStreetMap yourself: Just register at OSM.org and klick on "Edit"; then an online tour of using the iD Editor will start. The domain of **Geographic Information Systems** (GIS) contains spatial data visualization and interactive web mapping. These are some basics about interactive web maps: * A typical interactive web map with POIs (or marker/icon) consists of several graphical window interface elements, like webpage header (vs. 'map canvas'), buttons, input fields and layers: See figure 1. * Navigation on the map intuitively is done with mouse moves, plus with buttons "Zoom in" and "Zoom out" (defining zoom levels). * The "Base Map Layer" gives you background information where you are. The optional "Layer Switch" button typically let's you choose which base map is being displayed in the background: topographic map (default) or satellite map. * The "Base Map Layer" is visually overlayed by a marker (pin / icon / pictogram) - or one or several "POI Layers" (in figure 1 one there's one castle layer with point icons). * An optional "Share" button let's you share the current map view with others or in your posts. Here's an [example](https://www.openstreetmap.org/?mlat=47.22333&amp;mlon=8.81756#map=17/47.22333/8.81756).  _Figure 1: Sketch showing the graphical elements of an interactive web map._ For those not familiar with OSM and GIS tools see the chapter at the bottom. :::info **NOTE: Usage policy and copyright**: Note the usage policies of OSM services. Make sure to add this copyright to your map: "© [OpenStreetMap](http://openstreetmap.org/copyright) contributors". Typically you also add "[Fix an error](http://www.openstreetmap.org/fixthemap?lat=47.2242&lon=8.8227&zoom=15)" (see the weblinks behind). ::: # Adding a Location Plan to a Website With these informations you'll be able to add a simple map with a marker to a website. ## ... using a HTML \<iframe\> You can add a map with a marker to a website with no coding by embedding it with HTML \<iframe\> tag. For doing this simply ... 1. start OSM.org, 2. center on your location, 3. klick on the "Share" button in OSM.org (see figure 2), 4. and paste HTML to to your website (see figure 3).  _Figure 2: Getting HTML \<iframe\> snippet from OSM.org. (Source: Own screen shot)_ <iframe width="400" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=8.81254%2C47.22084%2C8.822579%2C47.22583&amp;layer=mapnik&amp;marker=47.22333%2C8.817558" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=47.22333&amp;mlon=8.81756#map=17/47.22333/8.81756">⛶ View Larger Map</a></small> _Figure 3: Web map with uMap showing OST Campus Rapperswil (Switzerland)._ ## ... using JavaScript You can also add a map with a marker using HTML/CSS and JavaScript programming. This is an example of a website containing a map with a marker: [Location map for Bitwäscherei Zürich](https://www.digitale-gesellschaft.ch/uber-uns/bitwaescherei). See "OSM-based Frontend Map Libraries" below for map libraries like Leaflet. ### ... and Leaflet You can find an example project creating a map with a marker and accompanying label below. Dragging the divider on the left reveals the source code. Leaflet is fairly straightforward and does not need a lot of setup to display a map with a marker. The code is also rather self-explanatory. There are a few parts, though, that we would like to highlight: * `map.attributionControl.setPrefix(false);` removes the Leaflet attribution in the bottom right-hand corner. * Feel free to drop `.openPopup()`. It is only used to initially open the popup. * `map.on("move", ...);` does not get called when the map is initially loaded. In our example this means we have to insert proper lat/lon/zoom values into the 'Report a problem' when constructing it. <iframe src="https://codesandbox.io/embed/leaflet-marker-forked-7glujj?fontsize=14&hidenavigation=1&theme=dark&module=/src/index.js,/index.html,/src/styles.css" style="width:100%; height:600px; border:0; border-radius: 4px; overflow:hidden;" title="leaflet-marker" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe> _Figure 4: Demo Location Plan project using leaflet in CodeSandbox._ ### ... and OpenLayers Compared to Leaflet, OpenLayers requires more code to set up such a map. It also does less for you by default. For example, you have to define an icon for the marker yourself (we copied over the marker from leaflet, so that it looks similar), otherwise it just inserts a circle at the designated coordinates. However, it is more flexible with coordinate transformations. There's another demo project below. Dragging the divider reveals the code, as above. A few things to note: * Coordinates are generally entered as 'lon, lat' instead of 'lat, lon' * Popups require code to open and close, they also have to be added to the html file and styles are not included by default and have to be set manually. * By default, icons are centred at their location. If your icon is a marker - like in this example - you have to define an offset so that the pointy bottom part gets put at the point's coordinates. `anchor: [0.5, 1]` works well for this icon. `0.5` centres it on the horizontal axis and `1` moves the icon upwards so that the bottom is aligned with the coordinates. * `map.on("moveend", ...);` also gets called when the map is initially built. In our case this means that, unlike with leaflet, we do not have to insert proper initial values for lat/lon/zoom into the 'Report a problem' link. * The map internally uses EPSG:3857. To convert coordinates to EPSG:4326, use ```ol.proj.transform( your_data_source, "EPSG:3857", "EPSG:4326" );``` <iframe src="https://codesandbox.io/embed/openlayers-marker-forked-peuqtg?fontsize=14&hidenavigation=1&theme=dark&module=/src/index.js,/index.html,/src/styles.css" style="width:100%; height:600px; border:0; border-radius: 4px; overflow:hidden;" title="leaflet-marker" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe> _Figure 5: Demo Location Plan project using OpenLayers in CodeSandbox._ ### ... and Vue-Leaflet Below you can find some example code that shows how a map with a marker can be implemented using Vue and [Vue-Leaflet](https://github.com/vue-leaflet/vue-leaflet). Please note that Vue-Leaflet is still in beta. Hence, some functionality might not work or might be missing entirely. When creating the demo project below, we noticed that: * adding map boundaries (so as to prevent the user to move the map too much) is not currently possible / working * having a popup show up from the marker after loading the page is not * the transition between zoom levels is - unlike with regular leaflet - not animated at all. There are a few things we think are important to note: * `{attributionControl: false}` removes the leaflet attribution that gets inserted by default. If you want your attribution to fit nicely in the bottom right corner, this needs to be set to false, as this plugin doesn't combine both attributions and displays one above the other. * By default, l-map's css `height` and `width` attributes are set to 100% inline. To use custom dimensions, override these values with `!important`. * In order for the map to display correctly, import the css inside the `<script>` tag either in the component where you use `<l-map>` or any parent component. ```vue= <template> <l-map ref="map" v-model:zoom="zoom" v-model:center="center" :options="{attributionControl: false}"> <l-tile-layer url="http://tile.osm.ch/osm-swiss-style/{z}/{x}/{y}.png" layer-type="base" name="Swiss Style OSM" ></l-tile-layer> <l-marker :lat-lng="markerPos"> <l-popup> <!--having it open automatically does not seem to be possible with this version of vue-leaflet--> OST Campus RJ </l-popup> </l-marker> <l-control-attribution position="bottomright" :prefix="attribution" ></l-control-attribution> </l-map> </template> <script> import "leaflet/dist/leaflet.css"; import {LControlAttribution, LMap, LMarker, LPopup, LTileLayer } from "@vue-leaflet/vue-leaflet"; export default { name: "MapComponent", components: { LMap, LTileLayer, LMarker, LPopup, LControlAttribution }, data() { return { zoom: 18, geojson: null, markerPos: [47.22331, 8.81752], center: [47.22331, 8.81752], attribution: "Data &copy " + "<a href='http://openstreetmap.org/copyright'>" + "OpenStreetMap</a> " + "contributors " + "<a href='https://opendatacommons.org/licenses/odbl/'>ODbL</a>" + " | Map by <a href='https://sosm.ch/'>SOSM</a> | " + "<a id='problem-attribution' " + "href='http://www.openstreetmap.org/fixthemap?" + "lat=47.41330&lon=8.65639&zoom=18'>Report a problem</a>", }; }, watch: { zoom() { this.updateProblemLink(); }, center() { this.updateProblemLink(); } }, methods: { updateProblemLink() { this.$el.querySelector("#problem-attribution") .href = "http://www.openstreetmap.org/fixthemap?" + `lat=${this.center.lat}&lon=${this.center.lng}` + `&zoom=${this.zoom}`; } }, } </script> <style scoped> </style> ``` _Listing 1: Example code for a Location Plan using Vue Leaflet_ Due to technical constraints in CodeSandbox, this project is not available there. To view this example in a browser, click [here](https://geometalab.gitlab.io/web-map-demos/vue-marker-demo/). The complete project can be found [here](https://gitlab.com/geometalab/web-map-demos/vue-geojson-demo). # Adding a POI Map With this compilation you'll be able to create a map with POIs. :::warning **WARNING**: As said, this document focuses on web apps without an own server. But relying on other services has its limitations - especially when dealing with geospatial data which tends to become massive. When you realize that you have 1000 map objects and more being displayed by the web client, think about an own web server application, like the "[Castle Dossier Map](https://castle-map.infs.ch/)" ([Video](https://www.youtube.com/watch?v=mg_TGqLAmx8)). ::: :::info **NOTE: Pro tip**: Before you create your own map, take a look at the long [list of osm-based web apps](https://wiki.openstreetmap.org/wiki/List_of_OSM-based_services) or [OSM Apps Catalog](https://osm-apps.zottelig.ch/), maybe someone else has already created what you need. This may save you a lot of time. ::: ## ... using uMap web application A simple solution with no coding is using the free [uMap](https://umap.osm.ch) map editor and embedding it with HTML \<iframe\> tag. You only prepare the data as GeoJSON file. See for example figure 6. For more information see the material "Using uMap to create a thematic online map". https://openschoolmaps.ch/ > Teaching Materials. <iframe width="100%" height="200px" frameborder="0" allowfullscreen src="https://umap.osm.ch/de/map/map-of-art-safiental-2020_2970?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=caption&captionBar=false"></iframe><p><a href="https://umap.osm.ch/de/map/brunnenkarte-der-schweiz_529">⛶ View Larger Map</a></p> _Figure 6: Web map with uMap map editor. (Sources: POI by Art Safiental, Basemap © [OpenStreetMap](http://openstreetmap.org/copyright) contributors)._ ## ... using MapContrib web application [MapContrib](https://www.mapcontrib.xyz/) ([Wiki](https://wiki.openstreetmap.org/wiki/MapContrib)) is another way to create your own map without coding. You need to know how to create an overpass query. After creating the map you can access it on the [official site](https://www.mapcontrib.xyz/) or embed it in an ```<iframe>``` on your own website. ## ... using MapComplete web application With [MapComplete](https://mapcomplete.osm.be/) ([Wiki](https://wiki.openstreetmap.org/wiki/MapComplete)) you can create your own map for your theme. You can start with a unoffical theme without coding and go further to create a offical theme. See https://github.com/pietervdvn/MapComplete#user-journey . ## ... using HTML Image Map file (via QGIS desktop application) The OpenSchoolMaps material "Obtaining OpenStreetMap data and using it with QGIS 3". (https://openschoolmaps.ch/ > "Teaching materials") show a solution using QGIS. QGIS is a desktop application which can export a map to a static GIF image, e.g. using QGIS Plugin "[HTML Image Map Creator](https://plugins.qgis.org/plugins/html-image-map-creator/)". ## ... using JavaScript programming [This map](https://www.myswitzerland.com/de-ch/erlebnisse/sommer-herbst/ausfluege/historische-schweiz/schloesser-und-burgen-suche/) from MySwitzerland about castles is an example of a map with POIs using plain JavaScript. The following projects show all table tennis tables no more than 100m away from a public transport stop in the Canton of Zürich. The data gets imported from a GeoJSON. We generated the GeoJSON using overpass and hosted it using npoint.io, an open-source online JSON storage bin. ### ... and Leaflet You can find the example project using leaflet below. Dragging the divider on the left reveals the source code. Leaflet is fairly straightforward and does not need a lot of setup to display a map with points of interest from a GeoJSON source. The code is also rather self-explanatory. There are a few parts, though, that we would like to highlight: * `map.attributionControl.setPrefix(false);` removes the Leaflet attribution in the bottom right-hand corner. * `map.on("move", ...);` does not get called when the map is initially loaded. In our example this means we have to insert proper lat/lon/zoom values into the 'Report a problem' when constructing it. <iframe src="https://codesandbox.io/embed/leaflet-tabletennis-forked-mh4yvo?fontsize=14&hidenavigation=1&theme=dark&module=/src/index.js,/index.html,/src/styles.css" style="width:100%; height:600px; border:0; border-radius: 4px; overflow:hidden;" title="leaflet-marker" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe> _Figure 7: Demo POI Map project showing table tennis tables. Uses Leaflet in CodeSandbox._ ### ... and OpenLayers Compared to Leaflet, OpenLayers requires a lot more code to set up such a map. It also does less for you by default. For example, you have to define an icon for the POIs yourself (we copied over the marker icon from leaflet, so that it looks similar), otherwise it just inserts a circle at the designated coordinates. However, it is more flexible with coordinate transformations. There's another demo project below. Dragging the divider reveals the code, as above. A few things to note: * Coordinates are generally entered as 'lon, lat' instead of 'lat, lon' * By default, icons are centred at their location. If your icon is a marker - like in this example - you have to define an offset so that the pointy bottom part gets put at the point's coordinates. `anchor: [0.5, 1]` works well for this icon. `0.5` centres it on the horizontal axis and `1` moves the icon upwards so that the bottom is aligned with the coordinates. * `map.on("moveend", ...);` also gets called when the map is initially built. In our case this means that, unlike with leaflet, we do not have to insert proper initial values for lat/lon/zoom into the 'Report a problem' link. * The map internally uses EPSG:3857. To convert coordinates to EPSG:4326, use ```ol.proj.transform( your_data_source, "EPSG:3857", "EPSG:4326" );``` <iframe src="https://codesandbox.io/embed/openlayers-tabletennis-forked-g8g4k7?fontsize=14&hidenavigation=1&theme=dark&module=/src/index.js,/index.html,/src/styles.css" style="width:100%; height:600px; border:0; border-radius: 4px; overflow:hidden;" title="leaflet-marker" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe> _Figure 8: Demo POI Map project showing table tennis tables. Uses OpenLayers in CodeSandbox._ ### ... and Vue Leaflet The example code below demonstrates how a map showing POIs can be set up using Vue and the [Vue-Leaflet](https://github.com/vue-leaflet/vue-leaflet) library. Please note that Vue-Leaflet is still in beta. Hence, some functionality might not work or might be missing entirely When creating the demo project below, we noticed that: * adding map boundaries (so as to prevent the user to move the map too much) is not currently possible / working. * the transition between zoom levels is - unlike with regular leaflet - not animated at all. There are a few things we think are important to note: * `{attributionControl: false}` removes the leaflet attribution that gets inserted by default. If you want your attribution to fit nicely in the bottom right corner, this needs to be set to false, as this plugin doesn't combine both attributions and displays one above the other. * By default, l-map's css `height` and `width` attributes are set to 100% inline. To use custom dimensions, override these values with `!important`. * In order for the map to display correctly, import the css inside the `<script>` tag either in the component where you use `<l-map>` or any parent component. ```vue= <template> <l-map class="map" ref="map" v-model:zoom="zoom" v-model:center="center" :options="{attributionControl: false}"> <l-tile-layer url="http://tile.osm.ch/osm-swiss-style/{z}/{x}/{y}.png" layer-type="base" name="Swiss Style OSM" ></l-tile-layer> <l-geo-json :geojson="geojson"></l-geo-json> <l-control-attribution position="bottomright" :prefix="attribution" ></l-control-attribution> </l-map> </template> <script> import "leaflet/dist/leaflet.css"; import { LControlAttribution, LGeoJson, LMap, LTileLayer } from "@vue-leaflet/vue-leaflet"; export default { name: "MapComponent", components: { LMap, LTileLayer, LGeoJson, LControlAttribution }, data() { return { zoom: 10, center: [47.41330, 8.65639], geojson: null, attribution: "Data &copy " + "<a href='http://openstreetmap.org/copyright'>" + "OpenStreetMap</a> " + "contributors " + "<a href='https://opendatacommons.org/licenses/odbl/'>ODbL</a>" + " | Map by <a href='https://sosm.ch/'>SOSM</a> | " + "<a id='problem-attribution' " + "href='http://www.openstreetmap.org/fixthemap?" + "lat=47.41330&lon=8.65639&zoom=18'>Report a problem</a>", }; }, async created() { const response = await fetch( "https://api.npoint.io/113395de1b61b4bac50d" ); this.geojson = await response.json(); }, watch: { zoom() { this.updateProblemLink(); }, center() { this.updateProblemLink(); } }, methods: { updateProblemLink() { this.$el.querySelector("#problem-attribution") .href = "http://www.openstreetmap.org/fixthemap?" + `lat=${this.center.lat}&lon=${this.center.lng}` + `&zoom=${this.zoom}`; } }, } </script> <style scoped> </style> ``` _Listing 2: Example code for a POI Map using Vue Leaflet_ Due to technical constraints in CodeSandbox, this project is not available there. To view this example in a browser, click [here](https://geometalab.gitlab.io/web-map-demos/vue-geojson-demo/). (If the POIs don't load a few seconds after the page has loaded, try reloading it). The complete project can be found [here](https://gitlab.com/geometalab/web-map-demos/vue-geojson-demo). # OSM Services for POIs * Webapp Overpass Turbo and webservice Overpass for retrieving POIs: https://dev.overpass-api.de/overpass-doc/de/ (more https://giswiki.hsr.ch/Overpass_API ) * Webservice OpenRouteService POIs: https://openrouteservice.org/services * See also Maptiler.com or Mapbox.com for retrieving POIs. # OSM-based Frontend Map Libraries The JavaScript libraries Leaflet and OpenLayers are the most prominent and powerful means to create your own web map. New vector tiles technologies provide more flexibility when rendering base maps locally on the client. However, they also still struggle with large amounts of local raster and vector data. * Leaflet (recommended): * https://leafletjs.com/ perhaps with Vector Tiles extension: see https://openmaptiles.org/docs/website/leaflet/ * Leaflet for VueJS: https://github.com/vue-leaflet/vue-leaflet * Leaflet Mini-Template (outdated - will be updated soon): [code](https://gitlab.com/geometalab/web-map-demos/leaflet-openlayers-mini-template), [web page](https://geometalab.gitlab.io/web-map-demos/leaflet-openlayers-mini-template/) * OpenLayers (more versatile handling of different Coordinate Reference Systems): https://openlayers.org/ * Vector Tiles, making the whole thing more complicated but also more flexible for personalized basemaps: * "MapLibre GL JS": https://maplibre.org/maplibre-gl-js-docs/api/ "MapLibre GL JS" for VueJS: [Blog](https://documentation.maptiler.com/hc/en-us/articles/4413873409809-How-to-display-a-map-in-Vue-js-using-MapLibre-GL-JS). * "Mapbox GL JS" Vector Tiles. # OSM-based Basemap Services Some often used tiles basemap layers in Switzerland: * OSM Swiss Style (XYZ/WMTS): ```https://tile.osm.ch/osm-swiss-style/{z}/{x}/{y}.png``` * "OSM Standard" (XYZ/WMTS): ```https://tile.openstreetmap.org/{z}/{x}/{y}.png``` * "Luftbild swisstopo" (XYZ/WMTS): ```https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.swissimage/default/current/3857/{z}/{x}/{y}.jpeg``` * swisstopo Landeskarte: ```https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.pixelkarte-farbe/default/current/3857/{z}/{x}/{y}.jpeg``` ::: success **NOTE:**: Dont forget to attribute correctly these basemap layers! See [this section below](#AttributionCopyright-on-Maps). ::: Basemap services and styles beyond OSM.org standard tiles: * Tile services from the Swiss OpenStreetMap Association ([SOSM](https://sosm.ch/)): https://sosm.ch/projects/tile-service/ * Maptiler services as Raster Tiles: www.maptiler.org (Freemium). * Mapbox: www.mapbox.com # OSM-based Geocoding Services These are services that - given a geoname like "Eiffel Tower" - return its coordinates: [48.8582,2.2944 (map with marker)](https://www.openstreetmap.org/?mlat=48.85829&mlon=2.29450#map=18/48.85829/2.29450). "Instant Search" means suggesting fitting geonames based on what the user has already typed in. * Nominatim: The "official" geonames search service behind OSM.org. Not suitable for instant search. Often does not match well since it initially was developed for data validation purposes: https://nominatim.openstreetmap.org/ui/search.html * "OpenRouteService" web service for geocoding: https://openrouteservice.org/services * Photon: https://github.com/komoot/photon (no public web service; you need to install / set it up yourself). # OSM Services for Routing and Navigation * Webservice OpenRouteService Routing and Directions: https://openrouteservice.org/services - includes "green routing" (see OSM services above). * Routing OSM.ch https://routing.osm.ch - often better in pedestrian routing (also as service, OSRM based). # Blueprints for OSM-based Web Map Projects Blueprints for own web maps (no own backend): * Sustainable Map by ToastHawaii: https://github.com/ToastHawaii/sustainable-map * "Leaflet vs. OpenLayers": http://dennisligtenberg.github.io/leaflet-0.7.3vs.openlayers-3/index.html (needs to be updated!) # Map Styles and Icons * Map Icons: Maki (License CC0) https://labs.mapbox.com/maki-icons/ and Temaki (License CC0) https://github.com/ideditor/temaki * (Vector Tile Styles... tbc.) # OSM and GIS Tools * Online GeoJSON editor: https://geojson.io * Online Validating GeoJSON: https://geojsonlint.com/ * The Bounding Box (bbox) Tool (online): https://boundingbox.klokantech.com/ * Converting spatial data formats (GeoJSON, GeoPackage, Shapefile, KML, GPX, WMS, WFS, ...): Online https://geoconverter.infs.ch/ (offline: Use OGR/GDAL locally e.g. by installing QGIS.org) * More on GIS formats with Python tools: https://annefou.github.io/metos_python/02-formats/ :::info **NOTE - TIP**: Coordinates are coded internationally as latitude and longitude (lat/lon), e.g. `47.22333 8.81755`; latitudes have values between -90 and 90 and longitudes between -180 and 180 (old) degrees; limit the number of decimal places to five. Here's an example of how not to do it: `141,40338345345345 2,17403235325235`. These coordinates are badly formatted, because 1: latitude and longitude are swapped, 2: a comma instead of a dot is used as the decimal separator, and 3: there are too many decimal places. ::: # Epilogue ## Checklist Here's a checklist for your own location plan: 1. Is the map easy to understand, e.g. is zoom level OK? 2. Are there buttons for zooming in and out? 3. Is there an (optional) "⛶ View Larger Map" (which may be a shared link to [OSM.org](https://www.openstreetmap.org/?mlat=47.22563&mlon=8.81360#map=19/47.22563/8.81360) or [Qwant.com Maps](https://www.qwant.com/maps/place/osm:node:1356639459#map=17.50/47.22513/8.81447)) (with URL parameters `&lat=*&lon=*` among others). 4. Is there an (optional) weblink to a routing service, like search.ch or routing.osm.ch (with URL parameters `&lat=*&lon=*`)? 5. Is there anywhere in the HTML code of your website a [Place](https://schema.org/Place) or a [LocalBusiness](https://schema.org/LocalBusiness) type (as per Schema.org) containing geo and [openingHours](https://schema.org/openingHours) properties? It must be encoded as JSON-LD. Tip: Validate your website or snippet using the free "[Structured Data Testing Tool](https://validator.schema.org/)". Example of a 'Place' type: ```<script type="application/ld+json"> {"@context":"https://schema.org", "@type":"Place", "geo":{ "@type": "GeoCoordinates", "latitude":"47.2247", "longitude":"8.81459" }, "name":"Foto-Spot Rapperswil-Jona"}</script>```. 6. Does there exist a map copyright, like "© OpenStreetMap contributors" (see NOTE below)? 7. Does there exist a "[Report a problem](http://www.openstreetmap.org/fixthemap?lat=46.7984983&lon=8.2317843&zoom=8)" linking (URL with lat/lon) to OSM. * For your own interactive POI map, all the checks from above apply, plus: 1. Is there a map title (a map key)? 2. Is it possible to share the shown section of the map or an actual POI? 3. Does there exist a search field for geonames? ## Attribution/Copyright on Maps Here are some examples of attribution and copyright texts with links which typically are located at the lower right of the map: * "OSM Swiss Style" tiles layer: _Data © [OpenStreetMap](http://openstreetmap.org/copyright) contributors [ODbL](https://opendatacommons.org/licenses/odbl/) | Map by [SOSM](https://sosm.ch/) | [Report a problem](http://www.openstreetmap.org/fixthemap?lat=46.7984983&lon=8.2317843&zoom=8)_ * "OSM Standard" tiles layer (adapt the lat/lon URL parameters behind “Report a problem"): _Data & Map © [OpenStreetMap](http://openstreetmap.org/copyright) contributors [ODbL](https://opendatacommons.org/licenses/odbl/) | [Report a problem](http://www.openstreetmap.org/fixthemap?lat=46.7984983&lon=8.2317843&zoom=8)_ * "Luftbild swissIMAGE" tiles layer: _Data © [OpenStreetMap](http://openstreetmap.org/copyright) contributors [ODbL](https://opendatacommons.org/licenses/odbl/) | Map © [swisstopo](https://www.swisstopo.admin.ch/) | [Report a problem](http://www.openstreetmap.org/fixthemap?lat=46.7984983&lon=8.2317843&zoom=8)_ If "Report a problem" doesn't make sense, leave it out. ## Getting more help More resources can be found in the list "[Awesome OpenStreetMap](https://github.com/osmlab/awesome-openstreetmap)" or on the [OSM.ch developer](https://www.osm.ch/entwickler.html) page. We at the Swiss OpenStreetMap Association (SOSM) are happy to help you: https://sosm.ch/ > Contact. ---