Ember.js add a map to your application

in this tutorial i will show you how to integrate a map in your ember application , we will use OpenLayers for this tutorial

let start an empty project

ember new map-example

cd map-exapmle

we need to use ember-modifier to be able to integrate the OpenLayers  JavaScript library

ember install ember-modifier

Generate a modifier for the map

ember g modifier openlayers-map

Install OpenLayers

npm install ol --save-dev

Initialize the map

//modifiers/openlayers-map.js

import { modifier } from 'ember-modifier';

import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';


export default modifier(function openlayersMap(
  element /*, positional, named*/
) {


const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});


});

{{!--templates/application.hbs --}}

 <div {{openlayers-map}}>

	<div id="map" class="map" tabindex="0"></div>
 
 </div>
 
 
 
 
<style>
      .map {
        width: 100%;
        height:400px;
      }
      a.skiplink {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;
      }
      a.skiplink:focus {
        clip: auto;
        height: auto;
        width: auto;
        background-color: #fff;
        padding: 0.3em;
      }
      #map:focus {
        outline: #4A74A8 solid 0.15em;
      }
    </style>