Category : leaflet

I am using Leaflet and routing.control to show a route, the route is A to B on road, but I need to calculate some points in the middle of the route generated. The code I am using to generate the route is the following: this.arrRoutesLatLng[0] = this.createLatLng(this.loc_origen.latitud, this.loc_origen.longitud); this.arrRoutesLatLng[1] = this.createLatLng(this.loc_destino.latitud, this.loc_destino.longitud); // Crear la ..

Read more

I have a custom Leaflet Control that contains three checkboxes. They serve as filtering markers and work perfectly fine on Windows (Chrome) and my Android Phone (Chrome). However, they misbehave on my iPad (Chrome and Safari). By default, all checkboxes are checked. Unchecking and even checking the same checkbox afterwards works fine, but if I ..

Read more

I am trying to export the map rendered as an image, using Leaflet and Google Mutant This is my definition on the layer. const googleMaps = L.gridLayer[‘googleMutant’]({ maxZoom: config.maps.maxZoom, type: ‘hybrid’, // valid values are ‘roadmap’, ‘satellite’, ‘terrain’ and ‘hybrid’ styles: [ { featureType: "poi.business", stylers: [{visibility: "off", color: "#99FF33"}], }, { featureType: "poi", stylers: ..

Read more

I have to create the leaflet map where I have used the angular formly . and I have created the custom component for leaflet map as leaflet.component.ts import { Component, OnInit } from ‘@angular/core’; declare let L: any @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [‘./app.component.css’] }) export class LeafletComponent implements OnInit { constructor() { } ..

Read more

My requirement is to create the leaflet map in angular formly,but I am new to this formly and I know how to use integrate the map with normal html in angular as below map.component.ts ngOnInit() { const map = L.map(‘map’).setView([51.509865,-0.118092], 10); L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, { attribution: ‘© OpenStreetMap contributors’ }).addTo(map); } map.component.html <div id="map"></div> map.component.css div{ height: ..

Read more

I’ve got this heat legend: …but I want the small number to be left to the image, to display a range. Code is as follows: const div = L.DomUtil.create(‘div’, ‘info versuch’); div.innerHTML += `${this.min}&nbsp;<i style="background:linear-gradient(to right, #9bc8f6 0%, #08519c 100%);"></i>&nbsp;${this.max}`; CSS: .info { padding: 4px 4px 4px 5px; background: rgba(255, 255, 255, 0.65); border-radius: 5px; ..

Read more