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
Criando Componente Accordion List com Ionic 3
Share this on WhatsAppOlá Galera.. tudo tranquilo? Sou novo por aqui e hoje vou trazer uma dica para deixar sua aplicação mobile um pouco mais intuitiva para o usuário, criando
Bomba! Xamarin agora permite desenvolver para iOS sem mesmo ter um Mac!
Share this on WhatsAppO Xamarin Live permite aos desenvolvedores implantar, testar e depurar seus aplicativos diretamente em dispositivos iOS e Android. Para isso basta instalar o aplicativo Xamarin Live Player
![[IONIC] – Custom Loader](https://ilovecode.com.br/wp-content/uploads/2018/01/Sem-título-500x500_c.png)
[IONIC] – Custom Loader
Share this on WhatsAppOlá galera, tranquilo? Primeiro, desejo a vocês um grande Ano Novo, muita saúde, sabedoria e sucesso na jornada de todos. Bom, a dica de hoje é bem legal.
2 Comments
Luisandro
dezembro 21, 15:46Luckzzz
julho 14, 18:46