Trabalhando com leaflef no Ionic 2/3
Salve coders, venho em mais um artigo mostrar como usar um mapa no ionic, caraca véi mais um tutorial de google maps, não jovens vamos utilizar outro mapa o leaflet aonde não precisamos gerar keys desnecessárias.
Bom sem mais delongas vamos jogar.
Iniciando o projeto.
Inicialmente vamos criar um projeto branco novo.
|
1 |
> ionic start LeafletMap blank |
e vamos importa o leaflet no projeto.
|
1 |
> npm install leaflet --save |
o HTML.
|
1 2 3 4 |
<div class="map-container"> <div id="mapId" style="width: 100%; height: 100%"> </div> </div> |
o CSS.
|
1 2 3 4 5 6 |
.map-container { position: absolute; top: 0px; bottom: 0px; width: 100%; height: 100%; } |
temos que adicionar também o arquivo css principal no arquivo index.hml sem ele o mapa não é renderizado.
|
1 |
<link href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" rel="stylesheet"> |
o Código.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import leaflet from 'leaflet'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { map: any; public center:leaflet.PointTuple; constructor(publicnavCtrl:NavController) { this.center= [-29.691484, -53.812409]; } ionViewDidEnter(){ this.leafletMap(); } leafletMap(){ this.map=leaflet.map('mapId', { center: this.center, zoom: 17 }); //http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png //http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x} var position =leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'NETZ Art Soluções em Internet © LeafLet' }).addTo(this.map); var marker = newleaflet.Marker(this.center); this.map.addLayer(marker); marker.bindPopup("<p> Leaflet Mapa Funcionando. </p>"); } } |
Tudo Funcionando.
Pessoal aqui está o código do projeto no github e até a próxima.
About author
You might also like
![[IONIC] – Animações com Lottie Files (ng-lottie)](https://ilovecode.com.br/wp-content/uploads/2018/01/Capturar-500x500_c.png)
[IONIC] – Animações com Lottie Files (ng-lottie)
Share this on WhatsAppOlá devs, tudo bem por aí?? Bom, a dica de hoje é bem legal e com certeza deixa nossos apps bem mais intuitivos e interessantes, pois iremos utilizar
O que é Npm, Bower, Gulp, Nuget, TypeScript e Sass?
Share this on WhatsAppVeja o que é e para que serve essas novas ferramentas! Venho hoje através deste post esclarecer o que é e para que serve as ferramentas Npm,
Versão final do Ionic 4 é lançada!
Share this on WhatsAppGalera, ontem foi anunciado a versão final do nosso querido Ionic 4. Se você não sabe do que estou falando, trata-se de um framework que permite com
2 Comments
Luisandro
dezembro 21, 15:46Luckzzz
julho 14, 18:46