OpenLayers3 in Ionic

Hello,I am a newbie in Ionic and I have to create an android application which requires Open Layers 3.Do you know any good tutorial about that?
Thank you,

Anyone? Should this mean that it cannot be done?

It can be done :slight_smile: Look here:

Hi @andrei_nedelescu,
did you find a tutorial or running examples about ionic2 and ol3?
As I am an ionic 2 beginner, I would really appreciate any help on it.

I have had some success with OL3 in Ionic2 RC1.

First download OL3:
Add the ol.css and ol.js to your src/assets folder
In your index.html add the following:
In the head:
In the body:

Create a new page:
ionic g page StreetMap

In app.module.ts add:
import { StreetMap } from ‘…/pages/street-map/street-map’;
Add StreetMap to your @NgModule declarations and entryComponents

In app.component.ts add:
import { StreetMap } from ‘…/pages/street-map/street-map’;
Add it to your list of pages if you are using SideMenu template.

In your street-map.html, add to your :

Now the fun, in your street-map.ts:

import { Component, ViewChild, Renderer } from '@angular/core';
import { Platform } from 'ionic-angular';
declare var ol: any;
declare var view: any;
  selector: 'page-street-map',
  templateUrl: 'street-map.html'
export class StreetMap {
  @ViewChild('map') map;
  constructor(platform: Platform, public renderer: Renderer) {
    platform.ready().then(() => {
      console.log("Platform is ready");

  loadMap() {
    console.log('Hello StreetMap Page');
    var vectorSource = new ol.source.Vector({

    for (var i = 0; i < 50; i++) {
      var iconFeature = new ol.Feature({
        geometry: new
          ol.geom.Point(ol.proj.transform([Math.random() * 360 - 180, Math.random() * 180 - 90], 'EPSG:4326', 'EPSG:3857')),
        name: 'Null Island ' + i,
        population: 4000,
        rainfall: 500

    var iconStyle = new{
      image: new** @type {} */({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: ''

    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: iconStyle

    var map = new ol.Map({
      layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer],
      target: document.getElementById('map'),
      view: new ol.View({
        center: ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857'),
        zoom: 3

This includes the example of loading 50 random location.
Good luck!

1 Like

I think you should follow a more “canonical” approach to use Openlayers in Ionic 2:

Here’s what I did:

  1. Install openlayers as a node module:
    npm install openlayers --save

  2. Install typings for openlayers:
    npm install @types/openlayers --save

  3. create map’s container:
    <div id="olmap" data-tap-disabled="true"></div>

  4. import openlayers:
    import ol from ‘openlayers’;

  5. import openlayers css in app.scss:
    @import "…/…/node_modules/openlayers/css/ol

  6. in your code do whatever you need to initialize and use your map with the standard “ol.” namespace of openlayers


I’ll give it a try.
Can you describe the benefits, if any, beyond what is described in the link.

Once the app is bundled there are no benefits I think (at that point it’s pure javascript after all).

Possibly there are some benefits while developing:

  • the availability of typings for openlayers gives you more control over your code (if you develop with Atom, Vs Code or similar you can immediately see if your ol code has any error)

  • in case you need to upgrade openlayers you don’t have to manually download and extract any file, an npm instruction on the command line and you are done :slight_smile:

Given that your approach is absolutely correct from a “javascript point of view”, IMHO I think we should (as developers) follow the “typescript way” as much as possible using the recipes the Ionic guys suggest.

Best regards