Open Source Mapping for Your Application in Minutes Adding Maps to Datapa Openanalytics Looked Almost Impossible

Total Page:16

File Type:pdf, Size:1020Kb

Open Source Mapping for Your Application in Minutes Adding Maps to Datapa Openanalytics Looked Almost Impossible 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.
Recommended publications
  • The Uch Enmek Example(Altai Republic,Siberia)
    Faculty of Environmental Sciences Institute for Cartography Master Thesis Concept and Implementation of a Contextualized Navigable 3D Landscape Model: The Uch Enmek Example(Altai Republic,Siberia). Mussab Mohamed Abuelhassan Abdalla Born on: 7th December 1983 in Khartoum Matriculation number: 4118733 Matriculation year: 2014 to achieve the academic degree Master of Science (M.Sc.) Supervisors Dr.Nikolas Prechtel Dr.Sander Münster Submitted on: 18th September 2017 Faculty of Environmental Sciences Institute for Cartography Task for the preparation of a Master Thesis Name: Mussab Mohamed Abuelhassan Abdalla Matriculation number: 4118733 Matriculation year: 2014 Title: Concept and Implementation of a Contextualized Navigable 3D Landscape Model: The Uch Enmek Example(Altai Republic,Siberia). Objectives of work Scope/Previous Results:Virtual Globes can attract and inform websites visitors on natural and cultural objects and sceneries.Geo-centered information transfer is suitable for majority of sites and artifacts. Virtual Globes have been tested with an involvement of TUD institutes: e.g. the GEPAM project (Weller,2013), and an archaeological excavation site in the Altai Mountains ("Uch enmek", c.f. Schmid 2012, Schubert 2014).Virtual Globes technology should be flexible in terms of the desired geo-data configuration. Research data should be controlled by the authors. Modes of linking geo-objects to different types of meta-information seems evenly important for a successful deployment. Motivation: For an archaeological conservation site ("Uch Enmek") effort has already been directed into data collection, model development and an initial web-based presentation.The present "Open Web Globe" technology is not developed any further, what calls for a migra- tion into a different web environment.
    [Show full text]
  • I Work for Natural Resources Canada in the Canada Centre for Mapping
    I work for Natural Resources Canada in the Canada Centre for Mapping and Earth Observation, where as a technologist and developer, I have been supporting the development of geo-standards, spatial data infrastructure, or “SDI”, and open spatial data for about 10 years. 1 Today, I’m going to talk about the community, concepts and technology of the Maps for HTML Community Group. The objective of the Maps for HTML initiative is straightforward: to extend HTML to include Web map semantics and behaviour, such as users have come to expect of Web maps. 2 Before getting in to the technology discussions, I think it’s really important to back up and take stock of the situation facing mapping professionals today. 3 Paul Ramsey is a leader in the open source geospatial software development community who currently works for the CartoDB consumer web mapping platform. In a recent presentation to a meeting of Canadian government mapping executives, Paul told us that government mapping programs were no longer relevant. In fairness, Paul did say sorry for having to say that. You know, sometimes it is hard to hear the truth, and I would have to say that Paul wasn’t completely wrong, so what I really want to say in response to Paul is ‘thank you’. 4 Thank you for the opportunity to talk about a subject that has been in the back of my mind not just since I began promoting standards for geospatial information and Spatial Data Infrastructure, and open spatial data, but since the first day I did ‘View Source’ on an HTML page containing a Web map and did not see anything that could possibly produce a map.
    [Show full text]
  • Package 'Leaflet.Extras'
    Package ‘leaflet.extras’ April 21, 2018 Type Package Title Extra Functionality for 'leaflet' Package Version 1.0.0 Description The 'leaflet' JavaScript library provides many plugins some of which are available in the core 'leaflet' package, but there are many more. It is not possible to support them all in the core 'leaflet' package. This package serves as an add-on to the 'leaflet' package by providing extra functionality via 'leaflet' plugins. License GPL-3 | file LICENSE Encoding UTF-8 LazyData true Depends R (>= 3.1.0), leaflet (>= 2.0.0) Imports htmlwidgets, htmltools, stringr, magrittr Suggests jsonlite, readr URL https://github.com/bhaskarvk/leaflet.extras, https://bhaskarvk.github.io/leaflet.extras/ BugReports https://github.com/bhaskarvk/leaflet.extras/issues RoxygenNote 6.0.1 NeedsCompilation no Author Bhaskar Karambelkar [aut, cre], Barret Schloerke [aut], Bangyou Zheng [ctb] (Leaflet-search and Leaflet-GPS plugin integration), Robin Cura [ctb] (Fixes for Draw Options), Markus Voge [ctb] (Enhancements for Draw Options), Markus Dumke [ctb] (Bounce Marker addition), Mapbox [ctb, cph] (leaflet-omnivore, csv2geojson, and togeojson libraries), Henry Thasler [ctb, cph] (Leaflet.Geodesic library), Dennis Wilhelm [ctb, cph] (Leaflet.StyleEditor library), Kirollos Risk [ctb, cph] (fuse.js library), Tim Wisniewski [ctb, cph] (leaflet-choropleth library), 1 2 R topics documented: Leaflet [ctb, cph] (leaflet-draw library), Alexander Milevski [ctb, cph] (leaflet-draw-drag library), John Firebaugh [ctb, cph] (leaflet-fullscreen library), Stefano Cudini [ctb,
    [Show full text]
  • Introduction to Web Mapping April 3, 2017 Sarah Watson Overview
    RDSC Workshop #5 Introduction to Web Mapping April 3, 2017 Sarah Watson Overview • What is Web Mapping • OpenStreetMap Overview • Brief Tutorials of: • Social Explorer • StoryMap • Carto Difference Between “Digital” and “Web” • Digital – involves a computer, but may not be accessible via the internet • Web Map – a type of digital map that is accessible in a web browser: • Maps.google.com • Openstreetmap.org • Web maps are connected to but different from maps made for mobile devices or for a digital globe (Google Earth) • Development really took off after the emergence of Google Maps • Many different platforms now exist OpenStreetMap • Sometimes referred to as the “Wikipedia of Maps” • Can be edited by anyone • Licensed under the Open Database License • Two ways to edit: • Web editor ID • Advanced editor JOSM OpenStreet Map • OpenStreetMap Task Manager From the website: “A mapping tool designed and built for the Humanitarian OSM Team collaborative mapping. The purpose of the tool is to divide up a mapping job into smaller tasks that can be completed rapidly. It shows which areas need to be mapped and which areas need the mapping validated.” • MapRoulette • From OpenStreetMap wiki: “A gamified approach to fixing OSM bugs that breaks common OpenStreetMap data problems into micro tasks.” Creating a Web Map While there are many different programs to create web maps, many require coding knowledge. Leaflet is a common, open-source JavaScript library used by many to create interactive, web maps Today, I want to highlight a couple different non-coding options. Social Explorer • Available for free through the library Good if you: • Plan to primarily use U.S.
    [Show full text]
  • Online Leaflet Example with Modifable Code
    Online Leaflet Example With Modifable Code Abyssinian Stanford fustigated very tough while Austen remains lingual and encyclical. Unrigged Gabriell misrule shamefully, he recuse his pounds very someways. Isodimorphic Wye commeasure or deter some Ibsenism powerful, however slain Linus sleeved impishly or apposed. This might be responsible for example code remains very feasibly click You are looking template. Leaflet with another huge factor in. Remember, PDF is a conversion from research original document to a final, theoretically uneditable document, so suck more no original degree is inaccessible, the porter the converted doc will be a beast and slay. These are included is a leaflet plugins to choose a map state brick option may continue to other modifications if your appointment today! It with leaflet. How to initiate the draw function without toolbar? You did exactly a same hate in that lesson using a polygon example. Cdc expert commentary: structure your target market as ebooks or header of points, you get some practice overlaying different layers. Bing maps in a code is prominently displayed as vector tiles to do not provide new markers along polylines and online leaflet example with modifable code, marker icons print projects. All its source document with face paint in. The following plugins help users navigate and extra dimensions. Insert and scaling without toolbar using a tree structure, we will be downloaded here are available below other modifications if we will further inform you. You purchase use HTML to style your popup window. Also, eliminate simple tables. Click tolerance of leaflet with questions? Plugin for persisting map state and browsing history move the URL hash.
    [Show full text]
  • Designing an Open Source Web Application for Visualizing Aquifers
    5/9/2016 Designing an Open Source Web Application for Visualizing Aquifers Mitchell Sodek Penn State University 596 B Report Academic Advisor: Patrick Kennelly Table of Contents Abstract ........................................................................................................................................................ 2 Introduction .................................................................................................................................................. 2 Proposed Project .......................................................................................................................................... 3 Related Work ................................................................................................................................................ 4 Web maps ..................................................................................................................................................... 8 Web Application Design ............................................................................................................................... 8 Spatial Database ....................................................................................................................................... 9 Spatial Data Publisher ............................................................................................................................... 9 Mapping Library .....................................................................................................................................
    [Show full text]
  • Providing Data to Openstreetmap a Guide for Local Authorities and Other Data Owners
    Providing data to OpenStreetMap a guide for local authorities and other data owners 1 Contents Before you start ....................................................................................................3 1: Why should you want your data to be in OpenStreetMap? ............................4 2: How OpenStreetMap works .............................................................................5 3: Licensing ..........................................................................................................8 4: Approaches ....................................................................................................10 5: Challenges in adapting data ..........................................................................14 6: Maintenance ..................................................................................................16 7: Working with the community .........................................................................17 8: Using the OSM ecosystem .............................................................................19 Appendix 1: Conflation tools .............................................................................21 Appendix 2: Case studies ..................................................................................22 About this guide This guide is intended for data owners including those at local authorities, other Government organisations and non-profits. Some basic GIS knowledge is assumed. It is not intended as a complete guide to editing and using OpenStreetMap, but rather,
    [Show full text]
  • Databc's Open Web Services
    DataBC’s Open Web Services For accessing geographic data via WMS/WFS Services Provided by OCIO - Digital Platforms & Data - Data Systems & Services March 2020 [email protected] Agenda 1. What are Web Map Services and Web Feature Services? 2. WMS/WFS Request Types 3. WMS/WFS Request Examples 4. What does DataBC offer for WMS/WFS? 5. Resources for Developing Applications with WMS/WFS 6. Resources for Developing Offline Maps 7. Questions? What are WFS and WMS?? ● Developed by the Open Geospatial Consortium (OGC), an international not for profit organization. ● Web Map Services (WMS) ○ is a standardized HTTP interface used to styling & render data into a map (image) and perform identify operations. ● Web Feature Services (WFS) ○ is a standardized HTTP interface used to access/query/analyze feature attributes. WMS/WFS Request Types ● Types of WMS Requests: <GetCapabilities> <GetMap> <GetFeatureInfo> <GetLegendGraphic> ● Types of WFS Requests: <GetCapabilities> <DescribeFeatureType> <GetFeature> ● WMS/WFS requests can be made for all layers or as a separate service each layer/feature class: http://openmaps.gov.bc.ca/geo/pub/wms?request=GetCapabilities http://openmaps.gov.bc.ca/geo/pub/wfs?request=GetCapabilitie http://openmaps.gov.bc.ca/geo/pub/WHSE_FOREST_VEGETATION.VEG_COMP_LYR_R1_POLY/wms?request=GetCapabilities http://openmaps.gov.bc.ca/geo/pub/WHSE_FOREST_VEGETATION.VEG_COMP_LYR_R1_POLY/wfs?request=GetCapabilities WMS and WFS Output formats WMS Output Options WFS Output Options <Format>image/png</Format> <ows:Value>application/gml+xml; version=3.2</ows:Value>
    [Show full text]
  • Openstreetmap
    OpenStreetMap Guillermo Valdés Lozano diciembre 2013 Documento protegido por GFDL Copyright (c) 2013 Guillermo Valdés Lozano. e-mail: guillermo(en)movimientolibre.com http://www.movimientolibre.com/ Se otorga permiso para copiar, distribuir y/o modificar este documento bajo los términos de la Licencia de Documentación Libre de GNU, Versión 1.2 o cualquier otra versión posterior publicada por la Free Software Foundation; sin Secciones Invariantes ni Textos de Cubierta Delantera ni Textos de Cubierta Trasera. Una copia de la licencia está en http://www.movimientolibre.com/licencias/gfdl.html Información Geográfica Se denomina Información Geográfica a aquellos datos georreferenciados involucrados como parte de un sistema para operaciones administrativas, científicas o legales.. Sistema de Información Geográfica (GIS) Un Sistema de Información Geográfica (GIS, en inglés) es una integración organizada de hardware, software y datos geográficos diseñado para capturar, almacenar, manipular, analizar y desplegar información geográficamente referenciada. Con el fin de resolver complejos problemas de planificación y gestión geográfica. Google Maps Son servicios gratuitos de Google para mapas en la web. Entre muchas cosas ofrece recorridos en 3D y vistas a pie de calle. Aunque para el usuario común no le cuesta usar estos servicios, pierden sus derechos al ceder todas sus contribuciones a Google. Razón para elegir software y datos libres En la mayoría de los países la información geográfica pública NO es de libre uso. El ciudadano viene pagando dos veces por ésta, la primera vía los impuestos para generarla y luego, por segunda vez, para obtenerla. Al mismo tiempo, puede estar sujeta a licencias que limitan su forma de uso.
    [Show full text]
  • Lowering the Barrier to Osm Contribution and Citizen Mapping Services Development for City Governments
    LOWERING THE BARRIER TO OSM CONTRIBUTION AND CITIZEN MAPPING SERVICES DEVELOPMENT FOR CITY GOVERNMENTS Chao-Kuei Hung1 1Chaoyang University of Technology, [email protected] Abstract This article uses a mapping program potluckmap to propose two ways for city governments to improve tourist experiences. By focusing on nodes only, OpenStreetMap editing can be reduced to collaborative spreadsheet editing. Hopefully lowering the barrier to contribution will bring more local business owners to advertise themselves on OSM. By separating the real-time bus position information from the map drawing, more bus companies can easily make their information available to tourists, and tourists can use a single map application to navigate in many cities across the globe. Keywords: OpenStreetMap, tourism, local businesses, public transportation 1. BACKGROUND AND THE PROBLEMS More and more city governments learn to open up their data to the public and make use of the results from public participation projects such as OpenStreetMap and software projects with Free/Libre and Open Source Software (FLOSS) licenses. The released data feed FLOSS projects such as mobile apps and/or websites for transportation and tourism information, thereby benefiting residents and local businesses without taxing city governments on their software development resources. In OSM, area- and street-information is relatively complete in many cities, but Poin- of-Interest (POI) information such as restaurants, shops, and entertainment spots is typically quite incomplete or even sparse even in big cities. Even with the advancement of OSM editors such as JOSM and iD, the entrance barrier to OSM editing contribution is still considerably higher than that to Wikipedia contribution for example.
    [Show full text]
  • Rethinking the Usage and Experience of Clustering Markers in Web Mapping
    Rethinking the Usage and Experience of Clustering Markers in Web Mapping Lo¨ıcF ¨urhoff1 1University of Applied Sciences Western Switzerland (HES-SO), School of Management and Engineering Vaud (HEIG-VD), Media Engineering Institute (MEI), Yverdon-les-Bains, Switzerland Corresponding author: Lo¨ıc Furhoff¨ 1 Email address: [email protected] ABSTRACT Although the notion of ‘too many markers’ have been mentioned in several research, in practice, displaying hundreds of Points of Interests (POI) on a web map in two dimensions with an acceptable usability remains a real challenge. Web practitioners often make an excessive use of clustering aggregation to overcome performance bottlenecks without successfully resolving issues of perceived performance. This paper tries to bring a broad awareness by identifying sample issues which describe a general reality of clustering, and provide a pragmatic survey of potential technologies optimisations. At the end, we discuss the usage of technologies and the lack of documented client-server workflows, along with the need to enlarge our vision of the various clutter reduction methods. INTRODUCTION Assuredly, Big Data is the key word for the 21st century. Few people realise that a substantial part of these massive quantities of data are categorised as geospatial (Lee & Kang, 2015). Nowadays, satellite- based radionavigation systems (GPS, GLONASS, Galileo, etc.) are omnipresent on all types of new digital devices. Trends like GPS Drawing, location-based game (e.g. Pokemon´ Go and Harry Potter Wizard Unite), Recreational Drone, or Snapchat ‘GeoFilter’ Feature have appeared in the last five years – highlighting each time a new way to consume location. Moreover, scientists and companies have built outstanding web frameworks and tools like KeplerGL to exploit geospatial data.
    [Show full text]
  • Openstreetmap: Its History, Data Structure, License and Ecosystem
    OpenStreetMap: Its History, Data Structure, License and Ecosystem Prof. Dr. Franz-Josef Behr Partially based on a a presentation of Min Qian, Virasith Phomsouvanh (2008): The OpenStreetMap (OSM) Project. Stuttgart University of Applied Sciences The content is licensed under a Creative Commons-Lizenz CC BY-NC-SA. OpenStreetMap… "Topographic Map" of the planet, offers geodata for free grows dynamically updated quite regularly user driven, not profit driven Wide range of tools Ideas and Background Some motivating ideas… "If you don't make [lower-resolution mapping data] publicly available, there will be people with their cars and GPS devices, driving around with their laptops," […] "They will be cataloguing every lane, and enjoying it, driving 4x4s behind your farm at the dead of night. There will, if necessary, be a grass-roots remapping.“ Tim Berners-Lee, 2006 [1] [1] http://www.guardian.co.uk/society/2006/mar/23/epublic.technology#article_continue [2008-10-22] [2] http://www.flickr.com/photos/89142790@N00/3212369167 “…in almost every case, a disruptive technology enables a larger population of less skilled people to do things that historically only an expert could do. And to do it in a more convenient settings. … One of the […] mechanisms through which our lives have improved” Clayton Christensen (2010): How Will You Measure Your Life “You could have a community capability where you took the GPS data of people driving around and started to see, oh, there’s a new road that we don’t have, a new route .. And so that data eventually
    [Show full text]