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
Como rodar aplicativo android no celular e debugar pelo browser do PC
Share this on WhatsAppUma dúvida muito comum dos desenvolvedores Ionic é a depuração remota de dispositivos Android.Neste artigo eu irei lhe ensinar como rodar seu aplicativo Ionic no celular e
Curso básico sobre XAML para iniciantes
Share this on WhatsAppCurso básico sobre XAML Uma das grandes dificuldades para quem esta iniciando o processo de desenvolvimento de aplicações universais para Windows e Windows Phone, é a manipulação
Curso Ionic em português – Aula 11 – Melhorando performance com Cache
Share this on WhatsAppAprenda como melhorar a performance de seu aplicativo Pessoal, continuando com nossa série de vídeo aulas, hoje iremos utilizar uma técnica que irá melhorar e muito a
2 Comments
Luisandro
dezembro 21, 15:46Luckzzz
julho 14, 18:46