Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 70612

Ionic 2 and Open Layers

$
0
0

@mettek wrote:

I have try to create a test project for use Open Layers 3 with the new ionic 2 but it isn't work

This is my layout:

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Mappa</ion-title>
</ion-navbar>


<ion-content padding class="map-page">

	<div id="map" class="map"></div>

</ion-content>

And this is my controller:

import {Page} from 'ionic-angular';


@Page({
  templateUrl: 'build/pages/map/map-page.html'
})
export class MapPage {


	constructor(){

		this.test = ["uno", "due", "tre"];



		// var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');

	 //    var map = new ga.Map({
		//     target: 'map',
		//     layers: [layer],
		//     view: new ol.View({
		//       resolution: 500,
		//       center: [670000, 160000]
		//     })
		//   });

	 //    this.map = map;


	 console.log(this.map);

	  var projection = ol.proj.get('EPSG:3857');

	  var map = new ol.Map({
	        target: this.map,
	        layers: [
	          new ol.layer.Tile({
	            source: new ol.source.OSM()
	          })
	        ],
	        view: new ol.View({
	          center: ol.proj.transform([8.92471, 46.07257], 'EPSG:4326', 'EPSG:3857'),
	          zoom: 14
	        })
	      });

	}

}

I have also imported this library on my application:

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <title>Ionic</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">


  <script src="http://openlayers.org/en/v3.14.2/build/ol.js"></script>



  <link ios-href="build/css/app.ios.css" rel="stylesheet">
  <link md-href="build/css/app.md.css" rel="stylesheet">
  <link wp-href="build/css/app.wp.css" rel="stylesheet">
</head>
<body>

  <ion-app></ion-app>

  <script src="cordova.js"></script>
  <script src="build/js/app.bundle.js"></script>


</body>
</html>

In a old project with ionic 1 this code is working. Any suggestion?

THX.

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 70612

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>