Cartography software and development
You can develop and create your application of cartography with differents Framework, the better way is to use Javascript langage.
In web development, you are the possibility to use OpenLayers, LeafLet, Google Framework for map or MapBox.
But if you prefer Desktop or Mobile application, its not a problem, you can use WebView component for Android or WKWebView for iOS.
For desktop application, if you are limited by a WebView component you can use Electron Framework with Angular.js.
OpenSource Javascript Framework of cartography
OpenLayers and LeafLet are open-source Framework for develop and create your applications.
OpenLayers contains many release (version 2.0 and 6.4.3 available) and there are community of specialist.
LeafLet is more easy to use and there are great community specialist : many developers contributions in Javascript.
openrouteservice.org provide many free service of itinerary similar to Google maps services.
Framework of cartography proprietary under licence
If you prefer a proprietary solution, you are the possibility to use MapBox or Google maps Toolkit for create your cartography application.
You are the possibility to use 3D-maps in your application : but its not free.
Many project on GitHub provide opensource solutions to create 3D-maps : all depends of your needs.
WMS /TMS services
If you want to create your application of cartography or consult map, you need to call WMS /TMS service provide by a service of a Geoserver.
For Openstreetmap, you can use by exemple :
You are a main map like Openstreemap, Bing Map or Google map.
After you need to create many layers integrate in your map.
There are notions of tiles : you load a subset of tiles for load a portion of map under a scope.
With LeafLet, you can load a subset of tiles of Openstreetmap like this :
In this example, your load a subset of tiles with XYZ coordonates.
wmsLayerOSM = new L.TileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 20, opacity: 1.0, transparent: true, zoomOffset: 0 });
Other WMS loading by example :
In this step, you specify the WMS address and the layer name to display:
wmsLayer2 = L.tileLayer.wms(‘https://services.data.shom.fr/INSPIRE/wms/v', {
layers: ‘DAM_LIMIT_CAT_NAVIGATION_WMSV’, transparent: true, opacity: 0.2, tiled: true, zoomOffset: 0
});
Discover WMS layers
A very practice application is QGIS Desktop, by this application you can discover all the layers and specifications for WMS/WMTS adress server.
Sample application to discover WMS layer : Cartography GIS Viewer
A basic level to display a WMS layer on a map, but very practice and more easy to configure.
Implementation of your main map
You can use Openlayer to create a simple Javascript map like this :
map = new ol.Map({
target: ‘map’,
layers: [layer_mapnik, layer_bing_aerial, layer_ais, grat, layer_navPro, layer_navPro2, layer_navPro3,
layer_gebco_deeps_gwc, layer_gebco_deeps_gwc2, layer_waterdepth_contours],
view: view,
});
Or with LeafLet like this :
map = L.map(‘map’,{
minZoom: 2,
maxBounds: world,
maxBoundsViscosity: 1,
wheelDebounceTime: 80,
attributionControl: false,
timeDimension: true,
timeDimensionOptions: {
timeInterval: “2020–10–19/2020–10–30”,
period: “PT1H”
},
timeDimensionControl: true
}).setView([0, 0], 0);
You many notions like Map, view, layers, zoom or controls.
Sample of cartography application create with Leaflet: Smart Adressbook on Google Play and Window store.
Sample application create with Openlayers like MyCartography available on Window Store :
Strategy to create a cartography application
You need to work with Html and Javascript to create your map.
By example, if you use Openlayers,
you need to create a Div Html element with the name “map” and configure it in Javascript, before add you Javascript and css reference. By example like this :
<script src=”https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
If you prefer to use LeafLet, you can add this link references like this:
<link rel=”stylesheet” href=”https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity=”sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==” crossorigin=””/>
<script src=”https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity=”sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==” crossorigin=””></script>
After you can create your Map objet with Javascript and create your layers.
A simple implementation with Leaflet like this :
var world = new L.LatLngBounds([[90, -180], [-90, 180]]);
map = L.map(‘map’,
{
minZoom: 2,
maxBounds: world,
maxBoundsViscosity: 1,
wheelDebounceTime: 80,
attributionControl: false,
timeDimension: true,
timeDimensionOptions: {
timeInterval: “2020–10–19/2020–10–30”,
period: “PT1H”
},
timeDimensionControl: true
}).setView([0, 0], 0);map.compassBearing.enable();
map.on(‘zoomend’, mapEventMove);
map.on(‘dragend’, mapEventMove);
map.on(‘overlayadd’, onOverlayAdd);
map.on(‘overlayremove’, onOverlayRemove);
Pluggins Javascript to overload your map
You can search on Openlayer and Leaflet website many pluggins to add new functionalities for your maps.
But for Openlayers, there are no official Pluggins, you need to search.
By example, you are js script extensions to load Bing or Openstreetmap map.
See this documentation for all possibility of Openlayers :
Go more with Leaflet or OpenLayers : Satellite observation.
If you are Fan of cartography and satellite observation, you are the NASA api of developement. Many WMS/ WMTS of map are available.
A very interesting GitHub page is available to describe and implement a satelite observation in your application with GIBS images.
A sample implementation of display of the Earth map display like this :
wmsLayerEarth= L.tileLayer.wmts(‘https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/wmts.cgi', {
layer: ‘BlueMarble_NextGeneration’,
tilematrixSet: ‘GoogleMapsCompatible_Level8’,
format: ‘image/jpeg’,
style: ‘default’,
uppercase: true,
transparent: true,
continuousWorld: true,
opacity: 1.0,
attribution: ‘’,
});
See this link
There a simple application create for iOS available on Apple store, Astronomia, i have create this application to display many satelite images like GIBS, Landsat 8, APod and EPIC.
See the Apple store link of Astronomia:
Links References :
