leaflet

leaflet open specific marker popup on button click

蹲街弑〆低调 提交于 2019-12-25 04:22:24
问题 I'm trying to open a specific marker's popup on some event(say, button click). In order to do so I add an id property to a marker and store all markers in an array. But for some reason, the id property of a marker inside of an array is undefined when I try to access it. var map = L.map('map').setView([51.505, -0.09], 13); var markers = []; var marker = L.marker([51.5, -0.09]); marker["id"]="0"; marker.bindPopup('!'); marker.addTo(map); markers.push(marker); openPopupById("0"); function

Overlaying circles on leaflet with d3 results in not positioned properly

强颜欢笑 提交于 2019-12-25 04:18:02
问题 I want to overlay a leaflet map with circles through d3 . <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Test</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"> <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> </head> <body> <div id="map" style="width:600px; height:600px;"> <script> var map = new L.Map("map", { center: [37.8,

Angular-Leaflet-Directive - Issue where the map is technically rendering, but none of its tiles appear .

纵饮孤独 提交于 2019-12-25 03:08:10
问题 . . . because the tiles are absolutely positioned within parent containers whose heights are equal to zero. Here is the directive: https://github.com/tombatossals/angular-leaflet-directive I'm uncertain as to the appropriate channel by which to seek assistance since I'm dealing with a relatively small library. I'm pretty sure I'm not doing anything wrong, since the gray "canvas" with zoom controls for the map is rendering and the map's tiles are being loaded (but without actually being

How to fix Uncaught TypeError: Cannot assign to read only property 'data' of object '#<ImageData>'

心已入冬 提交于 2019-12-25 02:55:36
问题 I'm trying to add data to my heatmap. I use this library in order to do that https://github.com/pa7/heatmap.js + the plugin from this. This is my import: <ltng:require styles='/resource/leafletMarkerCluster/Leaflet.markercluster-1.4.1/dist/MarkerCluster.css, /resource/leafletMarkerCluster/Leaflet.markercluster-1.4.1/dist/MarkerCluster.Default.css' scripts='/resource/leaflet/leaflet.js,/resource/leafletMarkerCluster/Leaflet.markercluster-1.4.1/dist/leaflet.markercluster.js, /resource

Successive markers with navigator.geolocation.watchPosition

你。 提交于 2019-12-25 02:46:40
问题 I use Leaflet and OpenStreetMap. In addition, I send geolocation data with socket.io in nodejs. The position of the user is displayed successfully with the code: navigator.geolocation.getCurrentPosition(.........) Now I want the position of the user is updated on the map every X seconds. So I replaced the code: navigator.geolocation.watchPosition(.........) My problem is that a new marker is added geolocation every X seconds, and the oldest markers are not removed. Could someone help me

Turf.buffer and a draggable marker

删除回忆录丶 提交于 2019-12-25 02:06:37
问题 So far I have created a marker, transfered it to geoJSON, and created a buffer around it with Turf.buffer. How can I get this buffer to "stick" to the marker as I drag it around the map? <script> L.mapbox.accessToken = 'fg.eyJ1IjoisdflksdaklsjZWwiLCJhIjoiRHNwX0ZWNCJ9.Ov2O5sslkdqV93_R0lq3Q'; var map = L.mapbox.map('map', 'example.kf6j9ec4') .setView([38.633, -90.319],12); var marker = L.marker(new L.LatLng(38.633, -90.319), { icon: L.mapbox.marker.icon({ 'marker-color': '1B05E3', "marker

How to load JSON data on Node.js

限于喜欢 提交于 2019-12-25 01:52:58
问题 I am working to load JSON data using Node/express.js and plot it on map. As first start, I am inspired by the example presented in the repp leaflet-geojson-stream. https://github.com/tmcw/leaflet-geojson-stream/tree/master/example Client: https://github.com/tmcw/leaflet-geojson-stream/blob/master/example/client.js var L = require('leaflet'), leafletStream = require('../'); L.Icon.Default.imagePath = 'http://leafletjs.com/dist/images'; window.onload = function() { var div = document.body

Polygon layer has a white background which covers base maps

帅比萌擦擦* 提交于 2019-12-25 00:43:17
问题 I am currently creating a webmap with leaflet. I used leaflet.ajax to import polygons from a geojson. But the new polygon layer covers the basemap, resulting in the polygons on a white background. https://virgilxw.github.io/Singapore_Election_1955/ If you go the github page and navigate to the layer menu, you can find the polygon layer under "Data". I have tried re-ordering the layers, but moving the base map above the polygons just result in the polygons being covered. // Default base Map

How to remove vector tiles tile bounding in Leaflet

人盡茶涼 提交于 2019-12-24 20:14:42
问题 I use leaflet to load vt tiles,which data geom type is polygon.I found that when loading, this will show a line betwwen tiles. So how to remove this bounding line? Maybe this is the issue of Geoserver,Which I used to publish pbf vt. 来源: https://stackoverflow.com/questions/56912496/how-to-remove-vector-tiles-tile-bounding-in-leaflet

R Leaflet Label Set direction

核能气质少年 提交于 2019-12-24 19:52:58
问题 Please have a look at the below example code, I would like to use the label direction (MyDirection), which is stored in df to have different label directions within my map. I can set every label to a specific direction like direction = "top" , but somehow its not working if I specify direction = ~MyDirection . Any Idea/solution would be much appreciated. Thanks in advance. library(leaflet) df <- read.csv(textConnection(" Name,Lat,Long,MyDirection ANN,51.19,4.46277778,right BAB,43.26306,-2