SearchRoad: entre Leaflet e Plugin

      Comentários fechados em SearchRoad: entre Leaflet e Plugin

leafletmobile[1].jpg

Leaflet é uma livraria muito versátil, escrita em Javascript com potencialidades e características que espaçam a grande raio para fazer um mapa realmente completo.

No blog foi já tratados uma introdução, na qual a gente tratava as bases para publicar um mapa e perceber o funcionamento, muito simples, deste ferramenta. Leia  Leaflet: uma breve introdução

O objectivo deste breve guia é entender que código teríamos que utilizar para poder visualizar de forma correcta  um nosso mapa em Leaflet, também sobre mobile. O guia apresenta um simples aplicativo SearchRoad baseado sobre umo dos diferentes plugin que a community faz largamente uso em combinação com a livraria de base leaflet.js.

Começamos a mostrar a nossa mappa numo smartphone. Utilizamos o mapa base do articulo anterior  leaflet_basemap.html que renomeamos index.html.

A este mapa basta simplesmente adicionar ao HTML e  ao folho de estilo CSS código para que o mapa  possa ser adaptável ao screen do portável. Por isso vamos agregar código na secção <head> do nosso index.html :

<meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />

Lhe damos também umo estilo CSS compatível para o browser presente sobre os smartphones (notamos a ausencia do % e a presencia do vw para resolver um bug neste browser) :

    <style type=”text/css”>
html, body,#map {height: 100%;
width: 100vw;
}
    </style>

Ao adicionar sò estas simples linhas, o nosso basemap resulta ser jà visivel para qualquier aparelho portavel.

Uma vez habilitado o mapa para o poder ver desde um browser presente num smartphone, adicionamos agora uma funcionalidade para podermos interagir, desfrutando as APIs do geocoder Nominatim de Openstreetmap.

Vamos utilizar os CDN (Content Delivery Network) do plugin por razoes de espaço no server (é sempre boa regla utilizar-los). Portanto no <head>:

<script src=“https://rawgit.com/k4r573n/leaflet-control-osm-geocoder/master/Control.OSMGeocoder.js”></script>
<link rel=“stylesheet” href=“https://rawgit.com/k4r573n/leaflet-control-osm-geocoder/master/Control.OSMGeocoder.css” />

O plugin base funciona em adicionar na parte <script>, onde o código javascript está presente, as duas linhas vermelha em baixo:

        var map = L.map('map').setView([48.854716, 2.349014 ], 14);
        mapLink = 
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            }).addTo(map);
                        
		var osmGeocoder = new L.Control.OSMGeocoder();

		map.addControl(osmGeocoder);

Para ver como trabalha o script, só chega verificar o link da demo oficial.

Nota-se que o mapa pergunta ao usuario dee pesquisar simplesmente um lugar, especificado graças as livrarias do Nominatim. O resultado é uma bounding box, ou seja umo rectângulo de zoom na zona entrada da pesquisa.

Ma se a gente requisisse adicionar um marker para restringir e individuar exactamente o lugar pesquisado?

Para responder a esta pergunta tenemos que desfrutar as opciones que o plugin ofrece , modificando ad hoc o script relativo a função de callback executada ao clicar no botão locate. umas linhas de código foi inserida no script para extrair a boundig box, de forma que se possa extrapolar a latitud e a longitud do ponto central resultado. Tal par de coordenadas vai introducida no objecto javascript que identifica o marker, que é bem representado de uma icona que vamos declarar na parte superior do código, na seguente forma:

        var map = L.map('map').setView([48.854716, 2.349014 ], 14);
        mapLink = 
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            }).addTo(map);
            
            //Qui dichiariamo le opzioni del'oggetto javascript rappresentante il Geocoder
            var options = {
                   collapsed: false, /* Whether its collapsed or not */
                   position: 'topright', /* The position of the control */
                   text: 'Search', /* The text of the submit button */
                   placeholder: 'Search location', /* The text of the search input placeholder */
                   callback: function (results) {
		               	var bbox = results[0].boundingbox;
				        first = new L.LatLng(bbox[0], bbox[2]);           /* Qui cerchiamo il centro della mappa per passare*/
				        second = new L.LatLng(bbox[1], bbox[3]);          /* le lat e long al marker */ 
				        bounds = new L.LatLngBounds([first, second]);
				        var center= bounds.getCenter();         /*utiliziamo il metodo getCenter()  per estrarre il centro della Bounding box*/
			            this._map.fitBounds(bounds);

		              //creiamo la variabile icona
                         var myIcon = L.icon({
					     iconUrl: 'https://raw.githubusercontent.com/k4r573n/leaflet-control-osm-geocoder/master/demo/images/marker-icon.png',
                          });
                      // creiamo il marker
                         var marker = L.marker(center, {
                                       icon: myIcon
                                         });        
                          marker.addTo(map)
		                  }
	                  };
            
		var osmGeocoder = new L.Control.OSMGeocoder(options);  //Qui passiamo la varibile option

		map.addControl(osmGeocoder);

O resultado final fica visível aqui em baixo. A função de callback insere sobre o mapa um marker que individua com boa precisão a location que se retende pesquisar.

                                                                               Abre o mapa

Conclusão 

O SearchRoad sublinha uma das multíplices  possibilidades que LeafletJS oferece aos usuarios, tudo através o utilizo dos seus plugin que simplificam enormemente o linguagem do scripting para desenvolver uma certa característica da nossa webmap.  O exercício pode ser melhorado, por acaso podemos definir melhor a exactidão do makrer sobre o mapa que identifica  o ponto à pesquisar. Mais complicado é obter um resultado que seja uma linha (uma estrada, uma rua, uma avenida) o um poligono (uma praça, um edificio), digamos um resultado que possa illuminar o objecto à pesquisar.