Sometimes we need to include maps with special functionality in our applications, so we need some GIS solution. One of most popular Javascript GIS frameworks is OpenLayers (https://openlayers.org/). OpenLayers has TypeScript types, so you can develop an application with OpenLayers and TypeScrip. Because we use the Angular framework, we should use angular components of OpenLayers to have a more consistent application and to use the same angular development methods.

There is an OpenLayers Angular components library on GitHub https://github.com/quentin-ol/angular2-openlayers which we will use.

There are few examples of how to use these components, so I had to research this area myself.

How to create an application:

First, create a new application with the angular-cli. Give it the name „angular-openlayers“. Next, execute the command:

ng new angular-openlayers

It takes some time for the application to generate. Next, enter the newly-created directory with the command:

cd angular-openlayers

Check your package.json file. It should be something like this:

{
  "name": "angular-openlayers",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

Now we need to start the new application to check that it was built correctly, using the command:

ng serve

We should not see any errors in the command prompt when the server starts. Now open a browser and go to http://localhost:4200/

You should see the message

app works!

That means the application was built properly and we can move onto the development of maps in our application.

Stop the server.

Now we will add the angular2-openlayers package to our application. Run the command:

npm install angular2-openlayers --save

You should not see any error when installing the package, just some warnings.

If you check package.json again, you will see that the angular2-openlayers was added to the dependencies.

Now add the openlayers package:

npm install openlayers --save

And openlayers types package:

npm install @types/openlayers –save

Now add the following code to the app.component.html file:

<aol-map [width]="'500px'" [height]="'300'">
  <aol-view [zoom]="6">
    <aol-coordinate [x]="-1.81185" [y]="52.44314" [srid]="'EPSG:4326'">
    </aol-coordinate>
  </aol-view>
  <aol-layer-tile>
    <aol-source-osm></aol-source-osm>
  </aol-layer-tile>
</aol-map>

Now start the application. When you refresh your browser, you will see a map in the browser window. The map is very simple without any functionality.

 

Comments powered by CComment