The Stack Overflow podcast is back! Listen to an interview with our new CEO.

Hot answers tagged

3

You mixed a few things here. kml is XML object, not a Leaflet layer, so you cannot set opacity to it with setOpacity function or add it to the map. Leaflet layer that comes from kml and you are interested in is track. This is feature group layer for which you can set style with setStyle method. You have to declare it outside fetch, so it be available later ...


2

Advanced projection handling is supposed to take care of the issue (indeed it gets worse when you disable it), but it's really just a set of heuristics. It's likely not accounting for some specific issue in your dataset. You should open a bug report attaching the sample data set, style, and requests to make the issue happen (ideally a preview request of ...


2

As the error tells you, you are trying to initialize map twice. Remove your second initialization var map = new L.Map('map', { fullscreenControl: true, fullscreenControlOptions: { position: 'topleft' } }); and modify original map initialization with Lefalet.fullscreen plugin options: var map = L.map('map', { zoomControl: true, maxZoom: 18, ...


2

One possible solution for this would be to attach click event to circle marker and on mouse click open desired web page in new window. Text info could be bound to marker tooltip to be shown upon mouse over. Relevant code could then look something like this: function tooltip_Sonde_2(feature, layer) { var tooltipContent = '<table>\ <tr>\ ...


2

The getData() function is indeed not very usefull as it return exactly what is stored in the variable geoJson But the main problem is that you are requesting the images using HTTPS from a website (http://freakplaces.com) that is not secured. Change the urls to HTTP and it will work ;) Demo : https://jsfiddle.net/fg3dorpj/


2

You need to store the id of each street in the list to be able to make a link between the list and the map when hovering. Then use Jquery to create the hovering function and .setStyle() to change the width of the streets. Working fiddle : https://jsfiddle.net/atsh7kv9/5/ Complete code HTML <div id="mapid" style="width: 50%; height: 400px;"></div&...


2

There is no bold style for polylines, just weight option, which is width of polyline in pixels. If you want to change polyline style to 'bold', you have to increase it's width, let's say from 6 to 8 pixels. You can increase it's width by declaring mouseover event catch function, where you can change width of polyline by setStyle method. At the same time ...


2

Is this what you are looking for: http://www.gistechsolutions.com/leaflet/DEMO/roads/plines.html Your GeoJSON is from a file in the same folder as the HTML file. I called it roads.json, look for url variable on the page, If you're using a service, put the real url in there instead of the file name. Next I created a layer1 and filtered it for "Repaving", ...


1

Solution 1 (see optimized solution 2 below after this one): On possible solution would be to use very efficient Turf.js library for geospatial operations when checking if feature is visible in current view. Example below creates 5000 GeoJSON polygons and displays them on the map, with permanent tooltips for polygons that are visible when zoom level is 12 ...


1

You're looking for a simple query string, here is a working example. I took the code below and called it querystring.html, and passes it coordinates in the url. The maps first view is from N. Adams, MA, and the query string zooms the map to London. Only issue you have to consider is if the query string is not used, null. http://localhost/querystring.html?...


1

Code mentioned in the question was produced as kind of a proof of concept that polygons can be splitted with Turf.js library (see Client-Side Polygon split) It's not very robust and thoroughly tested. Below is modified code which allows to split polygons multiple times with lines that have multiple points. Again it not robust and thoroughly tested, just a ...


1

I have managed to split a polygon by multiple linestrings with a little tweaking. Here is the Code. Rendering the split polygons. this.map.on('draw:created', (event) => { this.multiSelectByclick = false; if (this.selectedParcelId && event.layerType === 'polyline') { let layer = event.layer; this.drawnItems.addLayer(...


1

It looks like I found a decent solution to make it: First of all, the good code is provided by: https://github.com/shramov/leaflet-plugins where is the .kml section. You must copy the KML.js file into your repository Then in the front script code use: var track = new L.KML('Coventry.kml', {async: true}) .on('loaded', function (e) { map....


1

The issue has been resolved. A main thing was the injection of pointToLayer: function (feature, latlng) { feature.properties.myKey = feature.properties.Title + ', ' + feature.properties.Head return L.circleMarker(latlng, geojsonMarkerOptions); }, into the L.geoJson(geojson, { onEachFeature: OnEachFeature} So now, the full code looks ...


1

You are trying to match two different map projections. The default OpenStreetMap tiles use the EPSG:3857 coordinate reference system, AKA Web Mercator Projection. It looks like this: On the other hand, the Natural Earth files use the EPSG:4326 coordianate reference system, AKA equirectangular projection. It looks like this: The issue of map projections, ...


1

Here's a solution without using the TimeDimension plugin (because this plugin is meant to be used primarily with WMS and GeoJSON, they have an example with ImageOverlay but say that it is just a "proof-of-concept" and I find it overly complicated for the result). I coded with the following assumptions based on what you sent: All the PNG files are named in ...


1

What is wrong in your code is that your are giving layer object as parameter to polyline creation method L.polyline. It has to be an array of coordinates. You can get those coordinates from each feature of GeoJSON layer. But to make it work with Leaflet.PolylineDecorator plugin, you don't add GeoJSON layer to map. You just use this layer to iterate through ...


1

Instead of GeoJSON object you are passing Leaflet layer as first parameter to geoJson2heat function (see https://geomappando.com/2016/11/08/come-realizzare-una-heatmap-con-leafletjs/). You don't need to create GeoJSON layer. Just pass GeoJSON object to geoJson2heat function: var punti_mappa = geoJson2heat(geojsonLayer.responseJSON, 4);


1

Assuming your map variable is called map, this zooms in when you click the map: map.on('click', function() { map.zoomIn(); }); If you're asking to fire an event when zooming happens, then use: map.on('zoom', function() { alert('Zoom, zoom, zoom, zoom, I want you in my room'); }); You can also use the zoomend or zoomend events.


1

I missed it somehow, leaflet itself provides wrapLatLng which can be used as this.map.wrapLatLng(latLngPoint), this returns normalized form of latitude longitude how we need.


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