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
Flutter – Conhecendo o SDK mobile do Google
Share this on WhatsAppOlá pessoal, beleza? Há cerca de 3 anos venho me dedicando fortemente ao desenvolvimento mobile com o Ionic Framework. Porém, há 5 ou 6 meses uma nova
Criando estiloso SearchBar com ViewChild
Share this on WhatsAppOlá pessoal, tudo tranquilo? Bom, hoje mostrarei como adicionar um Search Bar em sua aplicação, mas não é qualquer Search Bar, vamos fazer ela aparecer e desaparecer ao
![[IONIC] – Criação e Validação de Forms com FormBuilder e Validators](https://ilovecode.com.br/wp-content/uploads/2017/11/formBuilder-500x500_c.png)
[IONIC] – Criação e Validação de Forms com FormBuilder e Validators
Share this on WhatsAppOlá galera, tudo bem com vocês? A dica de hoje é bastante útil em qualquer aplicação, vou ensinar a vocês como utilizar facilmente o FormBuilder e o
2 Comments
Luisandro
dezembro 21, 15:46Luckzzz
julho 14, 18:46