New answers tagged leaflet
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....
0
Control L.control.info below was written as an exercise of what does it take to write simple custom control as extension of basic L.Control object. It's not very 'by the book' and not very well tested, just an exercise.
Control consists of button with (styled) title and (styled) text which is displayed uppon clicking on button.
Options:
title - HTML ...
0
This is more of a graphical comment/clarification than answer, but hopefully you can see that the NSDIC shapefiles are in EPSG:3413, and correctly align with another EPSG:3413 backdrop (from a WMS), so the NSDIC shapefiles aren't faulty.
Your track data is in degrees lat/long, but EPSG:3413 length units are metres, so you will need to either reproject your ...
0
OpenStreetCam project might be useful as it allows you to selfhost StreetView like service. It's not as polished and will require a lot of work to integrate into existing systems. Take a look at the site to get a feel. It also have opensource apps for direct mobile uploads.
Another link you can check for already existing services around the world is this ...
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(...
0
I was able to figure out how to do this:
changes I made to the process
in the ProcessClick function I pass through a JS object in third parameter,which
stores the intersected layers info and GEOMETRY
Now on each click the selected geometries do not reset (I have a separate div for resetting them)
in the Info div I added an onlick function -- everytime ...
0
It works!
var mappos = L.Permalink.getMapLocation();
var map = L.map('mapid', {
center: mappos.center,
zoom: mappos.zoom
});
L.Permalink.setup(map);
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/">OpenStreetMap</a> ...
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?...
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 ...
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, ...
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
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
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 ...
0
With a bit of 'cheating' and help of Turf.js library solution is quite simple. Cheating here means that besides original L.glify.shapes we add aditional L.glify.lines layer where we use the same GeoJSON data as for shapes, but converting them from polygons to lines before passing them to L.glify.lines.
So code could look something like this:
function ...
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/
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 ...
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 ...
0
I'll put this into answer since it took me some time to find the reason for strange behaviour of your code, but content wise it really should be only comment.
You are using some old version of Leaflet.active-area plugin. Download the latest one from https://github.com/Mappy/Leaflet-active-area and your code will work as it should.
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,
...
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);
0
In order to meet my requirement i used icon url that i received in my network tab of console in chrome. This works fine as well:
var myIcon = L.icon({
iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/...
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 ...
0
Use map events. zoomstart,zoom,zoomend can be used. e.g.
map.on({zoom : yourfunction})
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.
0
home = new LatLng(lat, lng);
Log.d("mytag ", "current latlong is------" + lat + "," + lng);
marker = mGoogleMap.addMarker(new MarkerOptions().position(home).title("Here lives "));
mGoogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(home, 10));
and add this below code
...
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.
0
The default icon is defined as L.Icon.Default. To use it do not pass icon to the marker. So the code should be
L.marker([50,10]).addTo(map);
0
A fairly straight forward and easy way to accomplish creating an array of clickable markers within a leaflet map object is to manipulate the class list of the created marker by adding a custom incremented class name to each marker. Then it is easy to create a listener and know which marker was clicked. By skipping the active one or not, each has a ...
0
My approach was to abandon labels (set all layers in QGIS to have no labels (double click on layer in the Layer Panel to open Layer Properties > Labels > No Labels)), and focus on the popups, which are very nice and comparatively easy to deal with for a non-programmer.
I did see there are some Leaflet label plugins (though am not finding them now), but ...
0
As of leaflet 1.5, wicket's .toObject() method isn't working out for me. It created a feature and got mapped, but I could not get any onEachFeature type action to work with it. But the .toJson() function converts to the geometry component of a standard geojson feature, and I took that forward.
var wkt_geom = "POINT(34.0218531, -81.0707438)";
var wkt = new ...
1
Sorry, I may have caused this problem for you. Here is a better way. http://www.gistechsolutions.com/leaflet/DEMO/sports/index2.html
Here I define the layer first using null as the data source, then use getJSON to add the data to the layer. Then the layer control works as expected.
Better code:
//define the layer
var bbTeam = L.geoJson(null, {
...
0
Basing on the answer placed here:
https://codereview.stackexchange.com/questions/229225/loading-kml-files-into-leaflet-javascript-map/229289#229289
I would like to show the shorter code, that can be applied for this solution:
const addTrackAndBoundsFromKml = kmltext => {
// Create new kml overlay
const parser = new DOMParser();
kml = parser....
0
First thing if I would suggest is - run the code on localhost.
Keeping editor offline only leads to misleading conclusions, that code isn't working.
I tried this stuff on localhost and everything works fine.
4
max_area_polygon;
max_area = 0 ;
for(poly in (feature.geometry.coordinates)){
polygon = turf.polygon((feature.geometry.coordinates)[poly])
area = turf.area(polygon);
if(area > max_area){
max_area = area
max_area_polygon = polygon // polygon with the largest area
}
}
center = turf....
0
Here is a simple demo, data from 2 different GeoJSON files. http://www.gistechsolutions.com/leaflet/DEMO/sports/index2.html
It's just like your example, but it has 2 layers. Basically you have 2 urls, one for each source.
and a simple layer control to turn them on or off.
https://leafletjs.com/reference-1.5.0.html#control-layers
0
You can do this via an index in a for loop or lapply. For simplicity's sake I will show a for loop.
street2 <- list()
for(i in unique(Clipped_Street$Crime type)) {
street2[[i]] <- street[street$Crime type == i,]
}
This will result in the same type of output as split, a list with a SpatialLinesDataFrame, representing the subset attribute, for ...
0
I found an answer:
We must place the L.Control.search inside the $getJSON function. $GetJson function (in my understanding) is a "separate body" within the whole code, so things placed outside it cannot be applied.
The code should look like this:
var url1 = "Peterborough.json"; //.json file, where we fetch the data from
var job; //setting variable for our ...
Top 50 recent answers are included
