New answers tagged

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


0

If you're geojson file has something like: var kcTracts = { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -109.3359375, 42.032974332441405 ], [ ...


0

Checkout turf.js isobands function. Though ultimately @Diffusion_net is right: trying to do this in the browser is going to be much harder than doing it on your own using Arc/qGIS. If your data is relatively static, this shouldn't be an issue. If you have to perform these calculations on the fly in the browser, then isobands should get you there.


0

See the Readme about GeoJSON properties. The correct property name is height, not building:levels. building:levels is the corresponding tag in the OSM database but it is converted to a height property for the resulting GeoJSON data.


0

[...] a tile server for other astral bodies, such as Mars and the moon.[...] Should the planet radius be provided by the server to the client or should this be specified in the client? Both. Leaflet assumes EPSG:4326 as the reference frame of any L.LatLngs, and EPSG:3857 for display. These coordinate systems assume that the shape of the earth is WGS84. ...


0

I just got a basic Leaflet webpage setup and working after hacking away at it for a long time before finally giving up and asking for help on StackOverflow (the Leaflet.com quickstart tutorials do not have working code, or I may have missed something there where it talks about the #map properties inside style tags). Check out this stackoverflow question for ...


0

So I do not know of any native plug ins for leaflet to create contour lines and fill them in like this. So unless you want to write your own function for achieving this I see the easiest way to go about this would be to create contour polygons(filled contour lines) in a desktop software (ArcGIS, QGIS, etc.)and export the shapefile, afterwards convert that ...


-2

You can try out our Free Geocoding API. It sounds like we would be a perfect match for this. Disclaimer: I work for Geocode Farm (the service that I am recommending).


3

If you already have a GeoServer WMS service, then the most straightforward way is to use the getFeatureInfo capabilities of the WMS protocol. See https://github.com/heigeo/leaflet.wms and http://docs.geoserver.org/latest/en/user/services/wms/reference.html#wms-getfeatureinfo


1

Hmm. Yes, most tile provider use 3857 but, 4326 is also native supported by leaflet. Before you asked question did you try retrieved data from mongo to use with leaflet? As far as I know it's shouldn't be a problem. When you add geojson with points in 4326 leaflet will internally reproject them to 3857.


0

The best thing is to keep things simple. Most of all tile provider use 3857 and the simple way is to publish wms also in 3857. For wms server like geoserver is not big deal, he will give you wms in every projection you want.


1

This is done in the Leaflet code by using the cursor CSS property, see https://github.com/Leaflet/Leaflet/blob/master/dist/leaflet.css#L193


0

For points you can do it using CSS, in the layer you can use the pointToLayer function and return a DivIcon with the CSS class you want. Then the CSS has the rotation applied. See http://davetimmins.com/2015/10/07/Rotated-icons-with-leaflet/ for more details.


2

Where can I find data to produce these sort of visualizations? You're asking for administrative boundaries. How to get the official version depends on the country's administration. As far as I'm aware, a normalized dataset for all official administrative boundaries doesn't exist. IMHO the closest you might get to that is Natural Earth or OpenStreetMap. ...


0

L.LayerGroup can contain other LayerGroups, pretty confusing. I made this generic solution for recursively traversing a layergroup in my app ('vg.Map.' are just namespaces): /* vg.Map.recurseLayerGroup Run recursively through L.LayerGroup until contained layers are no longer instances of L.LayerGroup, then execute callback function. Parameters:...


0

<html> <head> <meta charset=utf-8 /> <title>PipeGeoJSON Demo</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src="https://api.mapbox.com/mapbox.js/v2.2.4/mapbox.js"></script> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <...


1

You need to retrieve the user coordinates to use them as input. In leaflet you can use e.latlng.lng and e.latlng.lat. Using this, your example should look like this: var control = L.Routing.control({ // waypoints: [null], waypoints: [ L.latLng( e.latlng.lat, e.latlng.lng), L.latLng(" string address") ], routeWhileDragging: true, show: true, ...


2

Add the following CSS somewhere (either between <style> tags in your main map HTML file within the <head>, or better in a CSS file): .leaflet-popup-content { max-width: 200px; height: 200px; overflow-y: scroll; } Not fully tested - hope it's broadly correct.


0

This was problem of leaflet crashing when it had to draw many features. i called the map.fitbounds after 1 sec and it worked.


0

I just gave it a try with a protocol-less URL ( //stamen-tiles-{S}a.ssl.fastly.net/ ) like this: var SUBDOMAINS = "a. b. c. d.".split(" "), MAKE_PROVIDER = function(layer, type, minZoom, maxZoom) { return { "url": ["//stamen-tiles-{S}a.ssl.fastly.net/", layer, "/{Z}/{X}/{Y}.", type].join(""), "type": type,...


0

Found the answer. This is an example of 3 paths in JSON:


0

The leaflet data visualization DFV is awesome I edited the last example and showed ON OFF passengers in each stop in the Bus line here the example Charts in Leaflet


2

I found an extension of Leaflet Data Visualization Framework Leaflet Visualisation specially for charts all types of charts


1

In your second code snippet, you're using the style option for L.GeoJSON as if it were an valid option for L.CircleMarker. Read the documentation carefully again and ask yourself: Does L.CircleMarker use a style option? A better way would be to calculate styles inside pointToLayer, e.g.: var layer = L.geoJson(data, { pointToLayer: function(feat, ll) { ...


1

Do read the Leaflet tutorial on using WMS - it specifically addresses how to use WMS services in other projections. Also note that you can not have raster layers in different CRSs in Leaflet. It's simply not supported due to the complexity of on-the-fly raster reprojection.


1

So finally, here is the solution I used thanks to Barrett ! If it can help someone else here is the code : var defaultParameters = { service : 'WFS', version : '1.0.0', request : 'GetFeature', typeName : 'database:table’, outputFormat : 'text/javascript', format_options : 'callback:callEP', srsName : 'EPSG:4326', }; var ...


1

I think you're just forgetting about the popupAnchor option of L.Icon/L.DivIcon.


0

The problem turned out to be Mapbox starting to glitch out after importing a GeoJSON file I uploaded as a new layer. I'm not sure if the GeoJSON file was incorrectly formatted, but as soon as I added the GeoJSON file as a layer, this problem started happening. I ended up just rendering the polygons from this GeoJSON file in Leaflet, and enjoying a better ...


1

If you want just the label: // add a scale at at your map. var scale = L.control.scale().addTo(map); // Get the label. var metres = scale._getRoundNum(map.containerPointToLatLng([0, map.getSize().y / 2 ]).distanceTo( map.containerPointToLatLng([scale.options.maxWidth,map.getSize().y / 2 ]))) label = metres < 1000 ? metres + ' m' : (metres / 1000) + ' ...


3

You can get the current zoom level using getZoom(). Assuming that you're using the tile layer system as used by Google Maps, Bing, Open Street Map and Esri, you can use that to infer the scale - see What ratio scales do Google Maps zoom levels correspond to? If you're not using that tile system, you may need to find another way to infer the scale from the ...


0

Read the JSON standard and GeoJSON standard - they specify everything from commas to brackets to property fields in the geographical data.


0

It might have to do with your getlatlong() function. I would try to troubleshoot by first replacing coordinates: getlatlong(feature.properties.x, feature.properties.y) with [1,1] or some other simple known X and Y. If that works then your issue is with this. If not you've ruled that out. I don't see anything misspelled or punctuation missing so after that I ...


0

The methods L.layerGroup.addLayer() and L.layerGroup.removeLayer() allow you to add and remove markers. The names of these methods was confusing to me because you are not adding or removing a layer, but rather markers in a layer. That aside, the removeLayer() does not work too well when you want to dynamically remove markers from the layer control because ...


0

With Visual Studio code, if you have TypeScript definitions files for certain libraries, /// <reference-ing such a definition file will light up intellisense for that particular library in any JS/TypeScript file that has that reference tag. For this to work in the case of leaflet, you need node.js installed and then. Make sure typings is installed npm ...


1

Limited success, but following seems to give at least some intellisense ... add a _references.js to the Visual Studio solution add a copy of the leaflet-src.js make sure the _references.js has /// <reference path="leaflet-src.js" /> in it But it's not 100%, so anything better?


0

Start by reading the reference for L.ImageOverlay, and browse plugins such as L.ImageOverlay.Rotated and L.DistortableImage.


0

In applications that display EPSG:3857 basemap tiles, latlngs supplied to L.markers are reprojected, but not transformed. Another way of saying this is that Leaflet assumes that lat/long coordinates share the same WGS84 (EPSG:4326) datum as the basemap tiles. The good news is that Esri's hosted tile services (which use the tiling scheme popularized by ...


0

L.layerJSON does not exist! Read http://leafletjs.com/reference-1.0.0.html !! You probably want to create new instances of L.Marker by looping through the data received via websockets, and then doing something like L.marker([msg.latitude, msg.longitude]).addTo(markers) to add the new markers to your instance of MarkerClusterGroup.


1

what if, hypothetically, otile1 was down? If one subdomain is down, then they are all down. Let me quote from https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_servers: Generally several subdomains (server names) are provided to get around browser limitations on the number of simultaneous HTTP connections to each host. Browser-based ...


3

You should not have to do any particular conversion on your OSM data or Leaflet returned coordinates. There is a high confusion on this subject, but I think it comes down to a simple explanation: OSM data is in WGS84 datum (EPSG 4326). This is how you plot the Earth onto an ellipsoid. Web Mercator (EPSG 3857) is how you project this ellipsoid onto a plane....


2

You would probably be interested in this post: Feature Request - Ability to cluster polygons (Leaflet.markercluster issue #612) You might be interested in Leaflet.Deflate plugin, but be careful when removing the marker (see #580). Another possibility would be to "add" methods getLatLng and setLatLng to your polygons, so that MCG can handle them ...


0

TL;DR: yes you can, but why would you want to do this? You can just upload GeoJSON using JSON file using Firebase console and it technically works. The data can then be loaded using REST API, and you will get same GeoJSON as result of .json query. However, this is not very effective as you can query same dataset back, or refer specific object by index (e.g. ...


1

_popup has an underscore in front of it to indicate that it's a private / member instance, and should not be accessed directly. The correct API is Layer.setPopupContent(). e.g. marker.setPopupContent(newContent);


0

Your code above works great without the <script> tag once its removed, like so: var this_marker = L.marker([51.5, -0.09]).addTo(mymap).bindPopup ('<div style="color: red">Hello<br>world</div>').openPopup(); If you are trying to add in additional JavaScript functionality to the popup when its open you could use a selector such as: ...


2

Mapbox.js extends Leaflet, which means that it includes all of Leaflet, plus a few extras like L.mapbox.featureLayer and L.mapbox.geocoder that make handling GeoJSON more convenient and add an interface to the Mapbox Geocoding API, respectively (there are more L.mapbox methods that you can read about on the API documentation page and you can check out ...


1

Try using preventDefault() or try changing #formulaire from a 'submit' type to a 'button' type and just have the script execute on click. At that point the data will submit but the updated image won't show since it not calling a new request to geoserver (which was happening when the page was refreshed). You need to find a function in leaflet to force your ...


2

It seems to me that you could just add the features to the local layer as well as sending them to PostGIS. I'd comment further but the key part of the code is missing from your question. As an aside why not use the WFS-T functionality built in to GeoServer instead of reinventing it using PHP?


2

This is not a GIS question, but rather a HTML+CSS one. Start by reading https://developer.mozilla.org/en-US/Learn/CSS/CSS_layout/Positioning , then do a bit of research on positioning block-level elements relative to the viewport, including how to use the vw and vh units.



Top 50 recent answers are included