New answers tagged

0

onEachFeature is what your missing, this is what I have used in my apps. var geojsonMarkerOptions3 = { radius: 8, color: "yellow", weight: 1, opacity: 1, fillOpacity: 0.8 }; geojsonLayer3 = L.geoJson(response5, { pointToLayer: function(feature, latlng) { return L.circleMarker(latlng, ...


0

Mapshaper.org is a handy free online tool that allows you to upload a geojson file, display it as a map, then choose one of three simplification alogrithims which you can adjust the strength of with a slider. It updates the map and highlights in red any places where there's a loss of integrity like an overlap between two regions. There's a 'fix' button that ...


0

Not exactly sure why your code is so complicated… Basically, you would just need to just the innerHTML of your info._div HTML Element on "baselayerchange" event. No need to change an update() method. var info = L.control({ position: 'bottomleft' }); info.onAdd = function(map) { this._div = L.DomUtil.create('div', 'info'); // create a div with a class "...


0

You can load as many files as you wish, as long as you can list them: for (var i = 0; i < listOfFilesPath.length; i += 1) { omnivore.gpx(listOfFilesPath[i]).addTo(map); }


2

You can use L.control, but there are only 4 positions: //logo position: bottomright, topright, topleft, bottomleft var logo = L.control({position: 'topleft'}); logo.onAdd = function(map){ var div = L.DomUtil.create('div', 'myclass'); div.innerHTML= "<img src='logo.png'/>"; return div; } logo.addTo(map);


1

You can try with L.Control.Credits plugin. A simple, attractive, interactive control to put your logo and link in the corner of your map. You can also easily do it yourself with JavaScript: var mapControlsContainer = document.getElementsByClassName("leaflet-control")[0]; var logoContainer = document.getElementById("logoContainer"); ...


-1

this is may be not an answer for your question, but I think it will be valuable for a beginner (like me), playing with leaflet and turf, using toGeoJSON() function directly, without storing points as array first. This is my code snippet, based on Leaflet.draw provided full.html example (with additional turf.min.js) var osmUrl = 'http://{s}.tile....


1

You can grab the marker's coordinates from the draw:created event like this: e.layer._latlng You can then pass these coordinates to your Turf.js function like this: map.on('draw:created', function (e) { var type = e.layerType, layer = e.layer; if (type === 'marker') { //Grab Coordinates As Array var lnglat = [e.layer._latlng.lng, e....


0

When you initialize the L.geoJson layer group that you will use as argument of Leaflet Omnivore plugin, you can take advantage of the onEachFeature option to copy a reference of your features into other groups, or even to duplicate your features. var subGroups = []; var myGroup = L.geoJson(null, { onEachFeature: function (feature, layer) { var ...


1

The OpenStreetMap’s French community are maintaining a rather exhaustive and accurate set of maps. Whether you’re a cartographer, a graphic designer or a developer, they’ve made it easy to reuse their work. As a matter of fact, from the OpenStreetMap’s OSM format, they’ve exported the maps to various formats such as Shapefiles, SVG, GeoJSON (to mention a few ...


0

In R, this can easily be done using the mapview package. For instance, displaying Landsat 8 band 5 with a customized color scheme and breaks works as follows: library(mapview) ## custom color palette cols <- colorRampPalette(c("green", "blue")) ## visualize data m <- mapview(poppendorf[[5]], col.regions = cols(100), at = seq(5750, ...


0

If you want to save the data only for that session, then this can achieved by the following code. I've basically re-arranged the code that you have written, along with the code to show the data in the Popup. map.on('draw:created', function (e) { //ADDS THE LAYER TO THE MAP featureGroup.addLayer(e.layer); e.layer.on('click', ...


0

The GIMP never let me down when converting any image files. I can't really promise it will work, but it's free so it can't hurt to try. It supports TIF and TIFF, and has countless ways to automatically and/or interactively manipulate image-colors.


1

The route method does not pass any options on to the router. You'll want to use the getRouter method to set the router options first. Then you can recalculate using route: L.easyButton('<img src="pic.png">', function(btn,map){ myRouter.getRouter().options.costing = "pedestrian"; myRouter.route(); }).addTo(map);


0

As @tom-chadwin mentioned it's not currently supported but you should be able to implement a basic version by making the following changes to your exported OL3 code: Replace the onSingleClick function in resources/qgis2web.js with: var onSingleClick = function(evt) { if (doHover) { return; } var pixel = map.getEventPixel(evt....


1

Note that in the case of Leaflet.draw plugin, it will make editable only the layers that are provided in the Feature Group specified in edit.featureGroup option. So you would probably just need to populate that Feature Group with the only layer(s) that you want your user to be able to edit.


0

The easiest way would probably be to implement the AND filter yourself using JavaScript. Probably something in the lines of: function applyAndFilter(val1, val2, val3) { layerGroupOnMap.clearLayers(); layerGroupReference.eachLayer(function (layer) { if (layer.prop1 === val1 && layer.prop2 === val2 && layer.prop3 === val3) { ...


2

You can use your existing text file, along with the Leaflet GeoCSV plugin, with the following code. Do note that I'm using jQuery to load the text file. Additionally, you can replace the OSM Layer with your MapQuest Layer. <HTML> <HEAD> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link ...


0

That worked for me: open geoJSON in a text-editor and put following code in front of geoJSON code: var zabudowaJSON_l = Don't ask me why that works, it worked for me. Here is an example var zabudowaJSON_l = { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [ { "...


0

At the moment, this is unsupported in qgis2web. While it should not be too hard in Openlayers exports with some development, Leaflet doesn't support selection of multiple stacked features with one click. I believe it could be done with a point-in-polygon plugin. However, using this approach by default for detecting clicks would slow maps down considerably, I ...


2

I slightly changed your code, and this is working for me: var myStyle = { fillColor: '#1c9099', color: 'white', weight: 3 }; var polygon = L.polygon( [[51.509, -0.08], [51.503, -0.06], [51.51, -0.047]]); polygon.setStyle(myStyle).addTo(map); map.on('zoomend', function () { currentZoom = map.getZoom(); if (currentZoom == 15) {...


1

Let me copy-paste from the Leaflet tutorial on WMS: The base WMS URL is simply the GetCapabilities URL, without any parameters Do not add any other parameters to the base URL. If you need extra parameters, pass more options to the L.TileLayer.WMS constructor instead. Judging by your code, I'll bet that the URLs actually requested have duplicated ...


0

I figured it out! OP here. First, I will clarify that this is the solution to my setup from the edit I made, after my initial post. The setup was a from the installation by package using apt-get from switch2osm.org and an Ubuntu 14.04 server installation. I am not sure if this solution will work for someone who has a manually configured server. Even if ...


0

If you're not specifying a format option in your L.TileLayer.WMS, the default of JPEG format is used - a image format that does not support transparency.


1

You are giving a zIndex to the basemap with a superior value than the WMS layer, my guess is that's what causing this problem, you should invert the z-indexes basemap : zIndex: 1; WMS layer: zIndex: 2;


1

Check this block where the infowindows are added using a documented method, instead of directly modifying the properties of the layer. cartodb.vis.Vis.addInfowindow( map, sublayer, ['cartodb_id', 'lat', 'lon', 'name'], { infowindowTemplate: $('#infowindow_template').html(), templateType: 'mustache' } );


0

As for animating a path, you might be interested in using Leaflet.Polyline.SnakeAnim plugin, instead of trying to achieve the result through D3. You just have to create the intermediate L.polyline's between each point in your GeoJSON data, possibly adding the point themselves (as L.marker's), then call snakeIn() on the resulting Layer Group. Demo: http://...


1

The layer that is to be toggled needs to be a global variable, thus making it available to the window[ ] object see here. I was creating the layer inside a function. I simply created the empty variables at the beginning of the script and it works. document.getElementById('chooser').addEventListener("click", function(e) { mapLayers.clearLayers(); layer =...


2

Your problem is that you referenced {s} in your code but you dont have subdomains installed. The official OSM has 3 different subdomains for that: http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png where {s} = a,b and c. So you should create at least one subdomain (set a DNS server and configure apache2 properly). But you can use it without subdomains. They ...


1

If the problem is that "feature.properties.name is undefined" just pass the feature into openSidedbar. And if you want to display "this is A" or "this is B" pass that feature parameter into html (assuming that sidebar is a jQuery object): UPDATE function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: ...


2

Might just need e.target or e.layer before feature.properties.name - console.log is your friend here and will likely answer your question.


8

According to Romain D on it1me.com, it can be done with the Leaflet.PolylineOffset as referenced in the comments by MattPil29 above. I have adapted it for the data in your example. I turned off your original line by changing opacity to 0 in myStyle. There is probably a more elegant way to not add it. The other key is flipping the x,y coordinate to make L....


0

Those are like three questions. I will answer the part about client-side rendering of large files. Large-scale rendering is difficult in Leaflet, partially due to loading large files in the browser. Once you approach 50k polygons you get start to hit the limit and should think about image tiles, a GIS server pushing WMS/Vector Tiles, or Mapbox/Carto/Others. ...


1

I recommend putting all markers into a layerGroup or a featureGroup, such as: var markerGroup = L.layerGroup().addTo(map); Then you add the markers to the group: L.marker([52.520861, 13.409564]).addTo(markerGroup); Then you can easily remove the markers from the map by using the removeLayer method on that group. For example, if you want to remove the ...


0

…BUT the _leaflet_id count goes up… This is a feature, not a bug. _leaflet_id is a private property of the layers, which should never be handled by users of the Leaflet library unless strictly necessary. You shouldn't care about this value, and you should keep references to your layers somewhere else. …I want to reset the variable [to] zero You ...


1

the variable layer will contain the e.target.id which is not a layer, I presume you have a table named layer somewhere and you want to get the layer with the index e.target.id to do so: var index=e.target.id; layer[index].addTo(mapLayers); If this is actually what you want to make


1

About the 2nd part _routes can't be accessed directly, but you can use the routesfound event right after .addTo(map) function: routeControl.on('routesfound', function (e) { distance = e.routes[0].summary.totalDistance; time = e.routes[0].summary.totalTime; });


0

I found a solution working for me, but it's maybe not the most elegant one. If the point clicked is contained in multiple polygons (match.length > 1), I generate this info string. In each iteration the for-loop creates a clickable link which then calls a function on click depending on the id. So I basically have to generate a lot of HTML in one single string ...


0

There were a few things wrong in there, but I think I have a simplified example that will show you want you need to know. The short answer is that on the onEachFeature: neighborhood_popup line, you should put a function there, and then all the function you want to call, passing any data that you want to pass additionally: Here is the full working code ...


0

If you don't want to disable each handler manually, you can loop over all of them and disable/enable them. Disable map._handlers.forEach(function(handler) { handler.disable(); }); Enable map._handlers.forEach(function(handler) { handler.enable(); });


0

I am also currently looking for this functionality, using R and leaflet/mapview etc. In mapview, my current workaround is to convert the raster into a points layer then plot the raster and the points layer together, put full transparency on the points layer. When you hover over the raster cell you get the associated points value without even clicking (...


3

If you display only OSM tiles, remember that these are only images, so you will not be able to match node id's nor to change how they are rendered (you cannot "highlight" them). You would need to retrieve the vectorial data of these ways / roads and display them as paths (e.g. L.polyline), with which you can associate metadata like the node id, and change ...


0

Spent quite some time testing, and as usual, the solution is fairly simple once you know how Leaflet wants to work. The solution is to specify a custom CRS with a custom transform function. This s where you can specify what each map unit/pixel represents, and this is what is used by Leaflet internally for all distance calculations and - well - transforms :) ...


1

It seems you are running the update() on a new marker each time. You should store the marker after you've created it; And then run the update function on this same marker-object every time. This means you have to store the markers outside of fillMap(). Also, you need to handle the changes in connectivity: when a car goes offline, you have to remove the ...


0

I see no special difficulty in implementing what you describe. The drop-down menu can be either external or styled as a map control, like you have done for your legends and slider. Then you can react to "change" event to detect selection of a new country. Panning to the new country can be easily done through map.fitBounds() and having your shapes gathered ...


1

I'd like to create an extension that takes the map, examines the route, and then creates a kml file representing the route. If it uses Leaflet, then the quickest way is to get a reference to the polyline layer and run toGeoJSON(), then use a tool like ogr2ogr to transform the GeoJSON into KML. I'm assuming you have access to the source code of the Leaflet ...


0

The Leaflet html file is not a GIS layer and cannot be added to QGIS via pyQGIS. The html does reference various kinds of GIS layers, e.g. geojson, wfs, wms which may be loaded to QGIS via pyQGIS. There are many examples of this on this site and on the web how to add these layers to QGIS via pyQGIS. Load a GeoJSON layer with QGIS's Python module http:...


0

There's also this jsfiddle I stumbled upon. I can't claim it as my own but you can sort through the options objects via event.target.options or even set the color attribute for a target event via event.target.setAttribute()


0

That is a typical problem that occurs in many websites, unfortunately. You have a few options: make the map not take up 100% of the width, so there is a little room on the side so a user can scroll insert a button (an arrow, for example), positioned somewhere in the map, that lets you jump to the space above/below the map Yan can set the dragging option ...


0

Copy-pasting from https://github.com/Leaflet/Leaflet/issues/4677: You can't both scroll the map AND the page. Try disabling scroll: http://leafletjs.com/reference-1.0.0.html#map-scrollwheelzoom See also http://leafletjs.com/reference-1.0.0.html#map-dragging



Top 50 recent answers are included