Open Source Mapping for your Application in Minutes Adding maps to DataPA OpenAnalytics looked almost impossible Our analytics solution is used by customers in 11 different countries across pretty much every vertical you can think of. As such, our maps solution needed; 1. To cover the whole world in detail 2. To allow the plotting of any possible geographic boundaries 3. To allow partial address information from anywhere in the world to be geolocated and plotted On the face of it, that seemed like an impossible task Open Source is an amazing thing! Tile Server Open Street Map OpenStreetMap is a map of the world, created by people like you and free to use under an open licence. Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the Nominatim Server mapping features most developers ever need. Selecting a tile server 1. Use a free, open tile server a) Openstreetmap.org – Heavy use (distributing an app) is forbidden b) CartoDB – Free unless it’s for commercial use c) MapBox – Free unless you charge for your app 2. Use a paid service CartoDB MapBox 3. Build your own tile server not complicated, but you 2 TB SSD drive, quad core CPU and 48GB RAM) and it will need to be maintained. 4. Get the professionals to build a server for you www.geofabrik.de 5. Speak to us, we’ve gone through the process and don’t yet need all the resource we have. Selecting a Nominatim server 1. Use a free, open nominatim server a) Openstreetmap.org – Heavy use (distributing an app) is forbidden b) CartoDB – Free unless it’s for commercial use c) MapBox – Free unless you charge for your app 2. Use a paid service CartoDB, MapBox, OpenCage Geocoder 3. Build your own tile server not complicated, but you 2 TB SSD drive, quad core CPU and 48GB RAM) and it will need to be maintained. 4. Get the professionals to build a server for you www.geofabrik.de 5. Speak to us, we’ve gone through the process and don’t yet need all the resource we have. Getting Started Maps are rendered in a browser. ➢ If you’re building a web app, happy days. ➢ If you’re building a mobile app, use a web view. ➢ If you’re building a client App use a browser control. Getting Started – What is leaflet.js Leaflet.js – mapping objects GeoJson Layer Shape Layer Polygon Layer Leaflet is a javascript library that enables you to manage maps in your web pages. Every visual element in your map belongs to a layer. These are broadly; Tile Layer ➢ Raster layers (tile layers to draw the map) ➢ Vector layers (shapes plotted on top of your map) ➢ GeoJSON layers Map Object Leaflet.js API Reference: http://leafletjs.com/reference-1.0.3.html Creating your first map You’ll need to complete the following steps; 1. Include leaflet.css 2. Include leaflet.js 3. Define (and style) a div to contain your map 4. Create the map 5. Add a tile layer to your map Creating your first map - includes 1. Include leaflet.css 2. Include leaflet.js You can include leaflet in your webpage by downloading the files, or referencing them online http://leafletjs.com/download.html Creating your first map – define a div for your map 3. Define (and style) a div to contain your map Creating your first map – create the map 4. Create the map o Create map object o Set view with latlng and zoom values http://leafletjs.com/reference-1.2.0.html#map-factory Creating your first map – add a tile layer to your map 5. Add a tile layer to your map o Create tile layer object o Define tile server o Add tile layer to your map http://leafletjs.com/reference-1.2.0.html#tilelayer Storing and resetting the map position var latLng; var zoom; function storePosition() { latLng = map.getCenter(); zoom = map.getZoom(); } function resetPosition() { map.setView(latLng, zoom); } Plotting Data There are 3 ways to plot data 1. As markers 2. As circle markers 3. As GeoJSON shapes Plotting Data – Where is it? 1. Make a web request to your nominatim server to get the coordinates http://nominatim.openstreetmap.org/search?q=clarion%20congress %20prague&format=json 2. Parse results to get LatLng Remember: Always do your geolocation on the way in. It’s less expensive. If you can’t cache your results. http://wiki.openstreetmap.org/wiki/Nominatim Adding markers to your map L.marker(<LatLng> latlng,<Marker options> options?) 1. Create a marker object 2. Assign the position and properties (comer delimited list). 3. Add to map. http://leafletjs.com/reference-1.0.3.html#marker Adding circle markers to your map L.marker(<LatLng> latlng,<Marker options> options?) 1. Create a marker object 2. Assign the position and properties (use value for radius and opacity). 3. Add to map. http://leafletjs.com/reference-1.2.0.html#circlemarker Adding a popup to your circle markers bindPopup(<String|HTMLElement|Function|Popup>content, <Popup options> options?) 1. Bind a popup to your marker http://leafletjs.com/reference-1.2.0.html#layer Adding geoJson shapes http://geojson.org/ GeoJSON is a format for encoding a variety of geographic data structures to support points, lines and polygons. Search and download or create your own (http://geojson.io) Adding geoJson shapes L.geoJSON(<Object>geojson?, <GeoJSON options>options?) 1. Create a geoJSON object 2. Define Properties 3. Add to map. http://leafletjs.com/reference-1.2.0.html#geojson Bind a popup to your geoJson shapes bindPopup(<String|HTMLElement|Function|Popup>content, <Popup options> options?) 1. Define a value for each feature (use feature properties) 2. Bind a popup to the geoJson layer 3. Define a function to build your display value for each feature http://leafletjs.com/reference-1.2.0.html#layer Add shading to your geoJson shapes The onEachFeature option is a function that gets called on each feature before adding it to a GeoJSON layer. Use it for any code you want to execute for each feature in your feature collection. http://leafletjs.com/reference-1.2.0.html#geojson Add a legend to your map L.control(<Control options> options?); You can add any static HTML to your map using the control class and setting the innerHTML; http://leafletjs.com/reference-1.2.0.html#control Responding to events Using events on the leaflet objects is a great way of adding your own bespoke interactivity to your maps. http://leafletjs.com/reference-1.2.0.html#map-event Adding multiple layers to your map You can add as many of any type of layer you like to your map. If you do, give the user a control to turn them on and off. http://leafletjs.com/reference-1.2.0.html#control-layers Adding other controls You should also add an attribution control to your map to attribute OpenStreetMap You may also want a scale http://leafletjs.com/reference-1.2.0.html#control-layers Download all the code and the presentation https://datapa.com/Nick/OpenSourceMapping.zip The tile server api key has been removed, register for your own at http://thunderforest.com/pricing/ Questions.