Hot answers tagged

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....


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 ...


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.


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) {...


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 ...


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);


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

thanks to the tips you send me from stackoverflow I managed to make the features editable. Now for the WFS layer part, I think that you'll have to construct the WFS-T query by yourself as here in the Georepublic example or as in my case switch to a server side language like php or use Node.js and store directly to the database if you have one. I almost ...


1

If my understanding is correct, the root cause of the issue resides in the fact that the layers you want to make editable through Leaflet.draw plugin are nested within a Layer Group (e.g. if they are built through L.geoJSon() factory, which outputs a Feature Group). But Leaflet.draw does not like nested groups in the drawnItems Feature Group, so you have to ...


1

Thanks to the help of @user1919 who pointed me to the solution proposed in Stackoverflow, I could edit the existing layer with the plugin Leaflet.draw without customizing it ( at least not it's code ). The edits now are made on the onEachFeature function in the L.geoJSON call like this: var selectedFeature = null; function handleJson(data) { ...


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

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....


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.


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);


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 ...


1

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(); });


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 ...


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

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: ...


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 ...


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 =...


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

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' } );


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 ...


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 ...


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; });



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