DC92.MyOl

• This package adds many features to openlayer maps
• It is deployed on refuges.info, chemineur.fr & alpages.info

INSTALL & BUILD

Requires node.js to be installed

• Go to the myol repository :

cd ./myol

• Install the required node_modules :

npm install

• Build the package & generate ./dist/* files :

npm run build

Simple example

This Example demo implements a single map with the most current maps layers providers.

• You can download the DISTRIBUTION ZIPPED PACKAGE and unzip it in your website FTP section.
• You can include the css & js sections of this example on your own page (adjust the include files path to your implementation)

Layer Switcher

See a Layer Switcher demo

Tile layers

See a Tile layers demo

• OSM, OSM-FR, OpenTopo, CyclOsm, Maps.Refuges.Info
• ThunderForest Outdoors, OpenTopoMap, Cycles, Landscape, Transport, ...
• IGN France, cadastre, satellite, ...
• SwissTopo, satellite
• IDEE España, satellite
• IGM Italie
• Ordnance Survey (Great Britain)
• Kompass Austria
• Bing Microsoft, satellite
• Google maps, satellite

Vector layers

See a Vector layer demo

• GeoJson ajax layers,
• OverPass (OSM vector points of interest)

Misc controls

See a Control demo

• Keep position, zoom & zoom on localStorage
• Geocoder
• Line length display
• GPX upload & download
• Off connexion GPS
• Print map

Marker display & edit

See a Marker demo

• Editable position marker with multi-projection position display,

Lines & Polygons editor

See an Editor demo

• Polylines & polygons editor.

Off line GPS

See an Off line GPS demo

• Browser -> options -> add to the home screen
• Choose a map layer
• Place yourself at the starting point of your hike
• Zoom to the most detailed level you want to memorize
• Switch to full screen mode (also memorize the higher scales)
• Move along the path of your hike slowly enough to load all tiles
• Repeat with the layers of cards you want to memorize
• Go to the field and click on the "My GPS" icon
• If you have a .gpx file in your mobile, view it by clicking on ⇑
• All tiles viewed once will be kept in the explorer's cache for a few days
• This application does not record your track
• Works well on Android with Chrome, Edge & Samsung Internet, a little less well with Firefox & Safari

Layers keys

If you want to use external providers layers, you must acquire free keys and replace them in the html (see source comment)

• French IGN : Get your own (free) IGN key at https://geoservices.ign.fr/
• OSM thunderforest : Get your own (free) THUNDERFOREST key at https://manage.thunderforest.com
• Microsoft BING : Get your own (free) BING key at https://www.microsoft.com

Architecture

Just include myol.js & myos.css after ol/dist, proj4js & geocoder's js & css.

• See this example
• Code & all tiled layers use EPSG:3857 spherical mercator projection

The coding rules are volontary simple & don't follow all openlayers's

• No JS classes, no jquery, no es6 modules, no nodejs build, no minification, no npm repository, ...
• Each adaptation is included in a single JS function that you can include separately (check dependencies if any)
• Feel free to use, modify & share as you want

Files

• myol.css : full CSS distribution
• myol.js : full JS distribution
• src/... : Source files
• ol/... : Openlayer V6.0.1 (you can use any of openlayers V5.* or V6.*) from Openlayers
• geocoder/... : Geocoder V4.0.0 from Openlayers geocoder
• proj4/... : Coordinate transformation software proj4js V2.5.0 from Proj4
• examples/... : Demos & visual tests
• gps/... : Off line demo with GPS capabilities

Tested on

• windows 10 : Edge, FireFox, Chrome, Opera, Brave
• Android (Samsung) : Samsung Internet, FireFox, Chrome, Brave, DuckDuckGo
• Linux : FireFox
• NO SUPPORT ON Microsoft Internet Explorer