Hot answers tagged

6

You're hitting tiling artifacts. Namely, the labels are being cut between tiles (and the circle markers for the points probably as well); this is easily seen by adding a border to the Leaflet tiles by adding a bit of CSS like .leaflet-tile-loaded { border: 1px dashed red; }, e.g.: This happens when the rendering engine uses data strictly inside the bounds ...


3

If you only use Leaflet to serve your content, the source data will have to be public. Javascript runs clientside on users' web browsers, and everything it retrieves will have to be open to the browser and thus, the user. If there are processing steps you need to perform on the data to only serve data selectively, you will have to do this serverside. You ...


2

The problem is caused because you are drawing a new version of the selected polygon when the click event happens. Then, when you think you are clicking on the original polygon for the second time you're actually clicking on the newly drawn version of the polygon. This polygon does not have the layerId information like the original layer which is why you get ...


2

If you look at a single tile, the native resolution is 512x512, whereas the default tileSize in the tileLayer API is 256 Try setting the tileSize and zoomOffset: L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={access_token}', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">...


2

Popup content passed to bindPopup layer method can be any HTML formatted text, which means it can be also a hyperlink. In your case it could be something like: polygon.bindPopup('<a href="http://www.mysite.com" target="_blank">RTK Survey Area</a>'); Hyperlink attribute target="_blank" is added so that linked page is opened in new tab/window.


2

If you look at the credit line at the bottom of the map you'll see that the basemap is data from OpenStreetMap (OSM). There is a network API you can call to query the underlying vector data that is used to draw the map. The R package osmar has some functionality to read OSM data but I can't get it to work at the moment. So I wrote a quick function: getosm &...


2

It looks like the Leaflet-WFST Plugin is a solution to this problem. var map = L.map('map').setView([0, 0], 2); var boundaries = new L.WFS({ url: 'http://demo.opengeo.org/geoserver/ows', typeNS: 'topp', typeName: 'tasmania_state_boundaries', crs: L.CRS.EPSG4326, style: { color: 'blue', weight: 2 } }).addTo(map) .on(...


2

When the user clicks on the map, this event is fired. the parameter e contains the clicked location. Your code computes a new coordinate 0.0000001 degrees away from the click coordinate and save the new coordinates in a variable. It does nothing with it (at least not in the the code you have published) MAYBE the intent is to build a square box, having ...


1

Leaflet has no built in functionality to specify alternative tile layer url to be used in case of tile loading error from primary url. A look at L.GridLayer and L.TileLayer objects internals shows that individual tiles are loaded asynchronously by specifying HTML element source for each tile. To specify general alternative url to be used in the case of ...


1

L.GeoJSON.AJAX object is an extension of Leaflet L.GeoJSON object and so it inherits all it's options (this is not explicitly mentioned in leaflet-ajax plugin docs). This means it's possible to use onEachFeature option to specify function where popup is binded to layer. In your case this would look something like: function onEachFeature(feature, layer) { ...


1

Instead of using the L.GeoJSON.AJAX method of loading in my data, I have opted to use $.getJSON as shown here. I was able to then load the popup at a later line using L.geoJSON and add my 'onEachFeature' using .addTo(map). This can be seen in the following code: <script> //Create initial map with predefined location. ...


1

Can I find out in this handler which LayerGroup the Polyline belongs to? No, since a Polyline (or any other Layer) can belong to zero, one, or several LayerGroups at once; a Layer doesn't keep a list of LayerGroups it's part of (it can belong to LayerGroups not on the map the layer is in). You might want to iterate all known LayerGroups and run hasLayer() ...


1

A late contribution, but perhaps it helps... As an alternative to changing the code in gdal2tiles.py or adding the special flag to leaflet, the file names of the tiles can be changed. This was an easy fix for creating tiles to use with ArcGIS online. Here is a rough bash script that will toggle the z/x/y convention back and forth between OSM/Google-Maps (...


1

You are mentioning group layers in your question and that's actually the right solution for what you want to achieve. You can group several tile layers in one group and add it to the map as single layer. To have those layers displayed in the right order one above other, map panes, mentioned by @IvanSanchez (https://leafletjs.com/examples/map-panes/), can be ...


1

Another solution using osmdata package. I decided to use tmap for plotting just because I'm more familiar with its syntax but there is not real difference between interactive version of tmap and leaflet. # packages library(sf) #> Linking to GEOS 3.6.1, GDAL 2.2.3, PROJ 4.9.3 library(osmdata) #> Data (c) OpenStreetMap contributors, ODbL 1.0. https://...


1

What you are trying to achieve will never work. Browsers do not allow javascript to freely access files stored on the user's local file system. This is a fundamental security feature. Otherwise, there'd be nothing to prevent any website from sniffing your computer and doing whatever it wants with all your files. In addition, I believe you misunderstand the ...


1

Forgive me if I'm wrong since I'm sorta new to this, but I noticed that you spelled it as L.Icon with a capital I. Maybe the version is newer or something but it doesn't work when i spell it that way. L.icon with a small i works fine for me. You also used the small case name in the return statement.


Only top voted, non community-wiki answers of a minimum length are eligible