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
Curso de Ionic 4 é lançado!
Share this on WhatsAppSe você gosta de criar aplicativos para as plataformas (Android e IOS) ou tem vontade de criar uma versão web do seu aplicativo em PWA, esse post
Curso Ionic em português – Aula 10 – Consumindo serviços externos
Share this on WhatsAppAprenda como consumir serviços externos Pessoal, continuando com nossa série de vídeo aulas, hoje iremos criar um aplicativo dos Correios onde poderemos consultar um determinado CEP e
Lista de dicas e cursos gratuitos em português
Share this on WhatsAppResumão de todos os cursos que passaram pelo site Hoje resolvi trazer um resumo de todos os cursos, treinamentos, vídeo aulas que foram divulgados aqui no site
2 Comments
Luisandro
dezembro 21, 15:46Luckzzz
julho 14, 18:46