New answers tagged leaflet
1
You can add it through L.tilelayer.WMS method of Leaflet
var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne'
}).addTo(map);
Here are more details that you can follow
https://leafletjs.com/examples/wms/wms.html
1
Here are a couple working examples. I take a mouse click event, get coords and use Turf to do a point in polygon check if it's there return some attribute to a variable. Next do the same thing for the second layer and third put the values in a bootstrap dialog.
Right click view source to see my code.
Note turf.inside should now be turf....
0
Since tooltip content function has only one predefined argument, which is layer object, the simplest way to pass additional arguments to function is to 'misuse' layer object for that purpose by adding our own object properties with required values. Property name can be any as long as it does not interfere with standard layer properties.
In your case that ...
1
I put up some write ups and examples here for a class.
http://www.gistechsolutions.com/leaflet/DEMO/ I have some write ups and examples, You can view source and copy/paste my code from the pages, and even get the data if you need it.
You may want to check out "Panel Map" and "NY Leg map", both of these apps use links and images that work off the on-click ...
1
Fixed the link http://www.gistechsolutions.com/leaflet/DEMO/basic/popupimage.htm
Right click on http://www.gistechsolutions.com/leaflet/DEMO/basic/popupimage.htm view source. note line 43, is where I define the popup. Since the popup is basically HTML I style it with a size and center() it in the popup. The GeoJSON file picture value is stored in feature....
1
Create layer group, add image layers to group and then add layer group to map:
var imageOverlays = L.layerGroup();
L.imageOverlay(priorycourt, imageBounds).setOpacity(0.75).addTo(imageOverlays);
L.imageOverlay(ipswich3a, imageBounds).setOpacity(0.75).addTo(imageOverlays);
imageOverlays.addTo(map);
or
var priorycourtLayer = L.imageOverlay(priorycourt, ...
4
Couple of subtly wrong things here.
A file URL starts with file:///, not with file:\\\, as per the WhatWG URL specification
Backslashes in JSON must be escaped (from \ to \\), as explained in this answer on stackoverflow
Therefore, you should replace...
"properties": {
"URL": "file:\\\Z:\Fixed Line\Design ..."
},
...with something like...
"...
0
Circle radius is just constant number, not dynamic function. When you are setting circle radius with your formula, radius is calculated and result stored as constant, not formula.
If you want radius of markers to change dynamically with zoom change, you have to iterate through all markers at zoomend event and change their radius with setRadius method. Since ...
0
Leaflet has no central repository/catalog of controls, neither has each control some default enabled/disabled property.
The closest you can get in Leaflet.draw plugin to check presence of individual draw elements in draw toolbar is to iterate through internal drawControl._toolbars.draw._modes object. This will list all active draw elements.
If drawControl ...
0
you are adding the array to div.innerHTML, instead of HTML. try this
div.innerHTML ='';
for (var i = 0; i < categories.length; i++) {
labels.push(
'<i class="circle" style="background:' + getColor(categories[i]) + '"></i> ' +
(categories[i] ? categories[i] : '+'));
}
div.innerHTML = labels.join('<br>');
2
If you look at GeoJSON structure, you'll see that feature.properties.display.sections is not a single object but an array of objects, so you have to reference it's elements as array elements:
var popupTxt = "<b>" + feature.properties.name + "</b>";
for (var i = 0; i < feature.properties.display.sections.length; i++) {
popupTxt = popupTxt
...
0
Leaflet.draw plugin doesn't fire any event when editing is canceled. The only way to achieve this is to hack plugin by extending it. Since this requires taking part of the original code of plugin, tha downside of this is that it might now work with future versions of plugin.
getActions method of L.EditToolbar among other things sets callbacks for click ...
1
A Simple Backend Service for Pgrouting written in Node js Express.
https://github.com/I1mran/pgRouting-Web-API
1
When custom handler is defined and hooked to map class, it is not enabled by default. To start working, it has to be activated after map creation by enable() method (see https://leafletjs.com/reference-1.5.0.html#handler).
So what's missing in your case is simple handler activation statement after map creation:
map.cursor.enable();
0
It looks like I partially solved it.
At least I am able to sort the problem on the general way.
In order to match the color values I needed to literally copy the color values from my GeoJSON marker colors set above:
var geojsonMarkerOptions2 = {
radius: 5,
fillColor: "#ffc34d",
color: "#1a1100",
weight: 1,
opacity: 1,
fillOpacity: 0.4
};
Where the most ...
0
Maybe this a will help a little. I have an example where you click on a map and it gets the points within 150 miles of your click. I also used a URL with JQuery's getJSON function.
If your data is on another site you usually get a CORS error, but if it doesn't change(static), go to the data site copy/paste into notepad and save it as a json file, than ...
2
You need to define styles or pointToLayer function in L.geojson to create markers
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
$.getJSON("taiwan.json", function (data) {
var datalayer = L.geoJson(data, {
onEachFeature: function (feature, ...
0
As mentionned above, you can draw the line twice to get a line border:
var style = {
color: "#008000",
weight: 5,
opacity: 0.6
},
stroke = {
color: "#fff",
weight: 7,
opacity: 0.4
};
polyline_2 = new L.Polyline(polylinePoints, stroke);
polyline_2.addTo(active_track);
polyline = new L.Polyline(polylinePoints, style);
polyline.addTo(active_track);
1
Web browsers have support for a limited list of image formats. They all support JPEG and PNG formats, and there's growing support for WebP.
Up to this date, no web browser supports TIFF images. Do not expect any of the other raster file types to be supported natively in any web browser.
The approaches to this problem are:
Convert your raster data to ...
2
Building off of genorama's answer above, you can also convert the output of bkde2D into a raster rather than contour lines, using the fhat values as the raster cell values
library("leaflet")
library("data.table")
library("sp")
library("rgdal")
# library("maptools")
library("KernSmooth")
library("raster")
inurl <- "https://data.cityofchicago.org/api/...
2
If you take a look at Leaflet docs about creating GeoJSON layer (which you should), you will see there is style option by which you can set dynamic styling function, which can set feature style depending on feature properties.
That's exactly what is done in Leaflet choropleth example, where GeoJSON layer is created with dynamic style, exactly as you want:
...
1
Answer is based on Leaflet.Control.Search plugin example Search markers with Fuzzy Search, which uses Fuse.js library for searching objects by keywords in properties.
The key steps to make possible search on two properties of two GeoJSON layers are:
At the time of creating GeoJSON layer, define new feature property myKey, which combines both properties we ...
0
So, the problem is in the variable, which must be included before we implement the code
<script>
var map = L.map('map').setView([52.257525, 0.068939], 10);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?
access_token={accessToken}', {
attribution: 'Map data © <a
href="https://www.openstreetmap.org/">...
1
One way to achieve this is to change font size of .text-labels CSS class dynamically at the end of each zoom.
To change font size of .text-labels CSS class relevant style is needed. I once found function getStyle on Stack Overflow (forgoten where) that does just that: gets style object for given CSS class. Probably overkill in this case, but it works.
From ...
0
First, I had a CORS error getting the GeoJSON from the link to my map. So I hit the link and copy/pasted the date into a file called poly1.json and put this in the same folder as my page. It works. But the data source is now static not dynamic.
Your making it look difficult, try this code:
<!DOCTYPE html>
<html>
<head>
<title>...
0
Similar to the answer from @nothingisnecessary the following uses layer.bringToFront() to maintain z-order when you have combined layer control and asynchronous data loading.
we don't want to clear the layers and add them back to the map as this will add all layers, instead we want to respect the selected layers in the Layer Control with minimal overheads....
0
Here is something similar : http://www.gistechsolutions.com/leaflet/DEMO/baseball/BaseballPanelSelect2.html The popups work as expected. If you select a distance (top right) and then click on the map, all points in that distance get selected and show up in the sidebar table. From here you can select on and it will zoom to that point. This was my way of not ...
0
Correct order of coordinates when specifying geographical points in Leaflet is [latitude, longitude], so you have to reverse your coordinates in this.testd array.
1
If you run your map from server and would like show your local GeoJSON file on map, you will have to upload your file. Usual method for this is using FileReader() object (see for example https://stackoverflow.com/questions/3582671/how-to-open-a-local-disk-file-with-javascript).
In your case I would recommend Leaflet plugin Leaflet.FileLayer, which can do ...
0
Map does not display initially because it needs two input values to be displayed: initial view center coordinates and zoom. You specified only zoom, but no view center.
You can specify center when defining map (this is for London):
var mymap = L.map('mapdiv', {
layers: [streets],
zoom: 11,
center: [51.509865, -0.118092]
});
You can specify also ...
0
This will also work: I incorporated the pointToLayer options into the circleMarker without using a separate GeoJSON options.
<!DOCTYPE html>
<html>
<head>
<title>JSON - Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/...
2
Usually, marker is defined in pointToLayer and don't need to be returned in onEachFeature. Also onEachFeature takes (feature, layer) as parameter whereas you are passing (feature, latlng, layer) so there might be error. Try this code.
L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions)...
1
Since you revisited your question, here is simpler solution that uses your style function. Just define variable currentZoomoutside zoomend event function, so that it will be accessible inside myStyle function:
var currentZoom = map.getZoom();
map.on('zoomend', function() {
currentZoom = map.getZoom();
});
0
There is no need to use onEachFeature function. Since we are dealing with points only, pointToLayer function is enough. There we can create point marker and bind popup and tooltip to it.
If option interactive: true is used when creating tooltip, it will accept mouse clicks. This mouse click will be propagated to marker and so popup will be automatically ...
0
In the first code you had LayerLocations layer but it is not there in second, so it says it is not a layer. in the 2nd part you have locations instead of LayerLocations so the last lines should be
// Layer controls
var layerControl = new L.Control.Layers(null, {
'Locations': locations,
'Flight Restriction Zones': LayerFRZ
...
1
So you're doing something like:
var LayerLocations = new L.LayerGroup([
$.getJSON( /* stuff */ )
]);
You're trying to create a L.LayerGroup out of the return value of a $.getJSON call. According to the docs, that's an instance of jQuery's jqXHR, and (should be obvious) not an instance of L.Layer.
There are several approaches to this problem. I always ...
0
There are a few optimisations here that might help.
Consolidate your layer processing into the onEachFeature callback, there is no need to do this on data load as well.
Consider making the layer clickable instead of the tooltip. I'm not sure why this works any differently, but it solves your issue in my code base. IMO this is more intuitive for the user ...
0
This is my updated solution.But the layer are not visible in layer control
Esri Leaflet Geocoder
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link
rel="stylesheet"
href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css"
/>
<link
rel="stylesheet"
...
1
One possibility of doing this would be with the help of turf.js library.
When adding newly drawn polygon, algorithm for detecting and creating possible holes goes like this:
Convert newly created layer/polygon to GeoJSON and then to turf geometry.
Iterate through all existing layers/polygons.
Convert each layer/polygon to turf geometry and check if it ...
0
2 options, for a single marker:
var lat = 43;
var lng = -76;
var marker = L.marker([lat,lng]).bindPopup(lat.toString()+", "+lng.toString()).addTo(map);
marker.addTo(map);
For multiple markers use a feature group:
var myMarkers = L.featureGroup();
// create loop here to add each marker to the featuregroup
var marker = L.marker([lat,lng])....
0
There are two ways to style GeoJSON features with Leaflet. The first is as you are doing now: passing a static object with a style defined as a JSON object. The alternative is to define a function that takes a feature, and returns a style. Something like the following would highlight red in the first case (sub-state), then blue (same state), and finally null ...
1
As already explanied in answer to this question Why the icon can't display with my JSON data on Leaflet, your JSON is not GeoJSON, so it's not converted to features and standard feature methods cannot be used.
Properties that you want to display in popup are members of itemData.properties object, so you have to iterate through itemData.properties keys ...
0
I see a few issues:
Data is not really GeoJSON, check http://geojsonlint.com/ to see if your data displays. The URL you posted has issues.
In your script area, you are using Leaflet 1.5.1 and Leaflet 0.7.3. You don't need the older version.
Here is a simple write up for displaying GeoJSON data, it may help. http://www.gistechsolutions.com/leaflet/DEMO/...
0
I use leaflet offline with apache cordova and electron http://geodataexplorer.world http://geodatacollector.xyz
Integrated tile server for local mbtiles and gpkg
2
Tile layers are a set of image files, usually about 256x256 pixels, that are accessed via a URL like /path/to/map/$x/$y/$z.png, so that, for example, /path/to/map/3/2/4.png returns the tile (part of the bigger image) that is 3 tiles along, 2 tiles down, of zoom level 4 of the tile layer (I might have the x,y,z, order wrong here, but you get the idea).
The ...
Top 50 recent answers are included
