Hot answers tagged

6

The order is important. You can't add something to the map before it is defined. Try in this sequence. First define the termini, metroStops var termini = ... ; var metroStops = ...; Then define the basemap, but don't add it to the map yet var osmBase = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'); var baseMaps = { "OSMBaseLayer": osmBase ...


5

As already pointed out in the comments, the problem is that you are directly opening the HTML file in your browser. This will show up like file:///C:/map.html in your address bar. The OSMGeocoder plugin is calling the URL location.protocol+//nominatim.openstreetmap.org/search (see source code). This works on webservers because the location.protocol is ...


4

Put your map codes in a separate Rmd file, and include it in your main file. https://raw.githubusercontent.com/yihui/knitr/master/inst/examples/child/knitr-main.Rmd


3

[Final Answer] I bet you can easily resolve this by setting the map's maxBounds equal to its initial bounds immediately upon loading. :) Just add this to your initializing code once your map variable is ready. map.setMaxBounds(map.getBounds()); [Original Response] When you instantiate your Leaflet map, you just need to pass in a maxBounds option ...


3

Here is a very rough approach to adding a custom layer control outside of the map, using only basic html elements (div, checkbox, label, etc.), no built-in Leaflet controls or plug-ins html /* data attribute will be used in javascript to know which layer to add or remove from the map */ <div id="layercontrol"> <label><input ...


3

Yes, it might sound confusing but internally markers are treated like layers. You have to use removeLayer, it will still only remove a single marker: var x = L.marker([51.5, -0.09]).addTo(map); var y = L.marker([51.45, -0.09]).addTo(map); map.removeLayer(x);


2

This may provide a partial answer. Use the map event listener to listen for zoomend to toggle the state of your bootstrap switch. map.on('zoomend', function (e) { // enable/disable based on zoom level if (map.getZoom()>=5) { $("[name='my-checkbox2']").bootstrapSwitch('disabled',false); } else if ...


2

Panes might help your cause. The idea being you can control what layers draw in what panes and then control the pane order. Here is the original GIT discusson on it. There is also a similar SO question regarding overlay layers and tile layers and how they are implemented on custom panes.


2

Do you have "win_url" saved as a property on each feature in states geojson? If so, try: function onclick(e) { window.open(e.target.feature.properties.win_url); }


2

what this error tells you is that you've lost the reference to the L.geoJSON layer you have named geoJson. It is not in scope in the geoJsonBounds function. You need to either pass the geoJson layer to the function or define it in a scope this function has access to. Can you post the full code?


2

i think the fact that we currently define an anonymous function to dicate what happens when users click on the control is why L.domEvent.removeListener can't be used to 'disable' it later programmatically from within a client app (more info here). it sounded like a pretty good idea to me, so i went ahead and submitted a pull request to add wrappers to esri ...


2

WMS layers are raster - which means they are images, even if they have transparent pixels. In other words: if a user clicks on a transparent pixel on a WMS layer, she is still clicking on the WMS layer. The only exception is clicking outside of the layer bounds. You might want to run a getFeatureInfo WMS request on the top-most WMS layer, see if there is ...


2

You can use setStyle within the mousemove function: layer.on({ 'mousemove': function (e) { //I want to make the point a red style ? this.setStyle({fillColor:"#ff0000"}); ... } )}


2

I was able to solve this issue by just deleting/not specifying the iconAnchor property of the custom icon. Then the 'icon's center' will always remain at the correct position by default.


2

According to the official tutorial (http://leafletjs.com/examples/geojson.html and http://leafletjs.com/reference.html#icon), you can define your icons before your L.geojson call and set them in your L.geojson function. var smallIcon = new L.Icon({ iconSize: [27, 27], iconAnchor: [13, 27], popupAnchor: [1, -24], iconUrl: 'my-icon.png' ...


2

Looks like a pure projections issue, not a Leaflet issue. My tool of choice for CRS transforms is ogr2ogr, which can take your EPSG:3111 shapefile and output a GeoJSON: $ ogr2ogr -s_srs EPSG:3111 -t_srs EPSG:4326 -f "GeoJSON" projected.json original.shp In my experience, ogr2ogr is a very flexible and powerful tool for CRS and format transforms if one ...


1

Check out turf.js, which should give you the geospatial capabilities to do what you need in browser. In particular, turf.squareGrid and turf.merge and (edited) the extension turf-overlaps. Something like this might get you most of the way there: var poly = <geoJSONPolygon>; var grid = turf.squareGrid(turf.extent(poly), cellWidth, unit); var ...


1

The only way I know of to arbitrarily manipulate layer z-indexing relies on the pane features introduced in 1.0.0-beta, specifically the map.createPane and map.getPane methods combined with the ability to set a pane option for each layer. You start by creating new panes for each of your layers to occupy: map.createPane('newPane1'); ...


1

You wrote L.titleLayer, but it should be L.tileLayer. You also provided an URL that does not serve tiles (individual PNG or JPEG images), but an .html file that contains the complete code with a map already (try opening it, you'll see). You should use this URL from the Leaflet tutorial instead: ...


1

What is the size of your geojson? I think you need to register 'layeradd' map event, this event will be called only after the geojson [or any other layer] is properly added to the map. In this event, you can get the layer object and its extent, and then call map.fitBounds(bounds) to zoom to the layer. Here is the basic code: map.on('layeradd', function (e) ...


1

Loading multiple geojsons in an application is not a very good idea if you are looking for better performance and speed. You can convert your geojson files to topojson and then load them all asynchronously. Size of topojson files will be less as compared to geojson which will help you to maintain you speed and performance. To convert geojson to topojson, ...


1

To hide a feature you can give it an invisible color with rgba(0,0,0,0) (the last value is the transparency value, 1.0 = opaque, 0 = fully transparent). var piky1=new L.geoJson(pol00,{ style: function (feature) { return { fillOpacity: 0.55, weight: 7, color: '#eff682' }; }, onEachFeature: ...


1

From what you've described, my guess is that some CSS is shifting your graphics container. It's probably on svg or div.leaflet-overlay-pane. You should be able to use dev tools to inspect and see if there's some inherited margin shifting your graphics north. To demonstrate, here's a fiddle that shows graphics shifted due to margin applied to svg elements. ...


1

In the onClick functions for each, put some code that checks the state of the other check box. If the state of the other checkbox is checked, then perform the code to uncheck and remove the layer and load in the one you want. Apply the same logic for the other check boxes onclick function.


1

Your GeoJSON is not valid, remove the {'geojson': "[]"} wrapper. Not sure if that is the cause of your issue, but try with this GeoJSON instead, and see if that solves it: {"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Point", "coordinates": [74.886779, 33.571307]}, "properties": {"rastvalues": 9, "id": 1, "species": ...


1

Could be possible to apply a zoom level into this url request? No. The concept of "zoom level" can only apply for grid-based reference systems (e.g. TMS). For WMS, you are providing both the bounding box of the area you want and the width-height of the image you want. The "zoom level" is implicit, defined by the ratio between those two parameters.


1

The problem is that your map is in EPSG:3857 and your getFeatureInfo request is in EPSG:4326. This will work in the sense that no error is thrown because the WMS is stateless and has no idea that the two requests are related but the location of your click is "off" because getFeatureInfo works by "drawing" the map as requested and looking for the feature ...


1

I have not found any Leaflet plugin suitable for Question 2 (plugin with support of gpx color extension); so I had to stick with some solution to Question 1. I found that for my task it is best to use http://umap.openstreetmap.fr because it can show my traces + it can be embedded to my page. Although it does not have option to export / import the GPX with ...


1

I tested a few things in the "Classic 2.5D" version of OSMBuildings which integrates with Leaflet. I was able to achieve what you wanted by starting/loading OSMBuildings quite late. If you want to add circles late or during runtime, you will need to have a FeatureGroup with a dummy circle before calling new OSMBuildings(map).load(), or else they end up on ...


1

This is because in your GeoJSON data, you use MultiPoint geometry type. { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "date_rec": "2016\/01\/13", "land_type": "…", "waste_type": "…" }, "geometry": { "type": "MultiPoint", "coordinates": [ [2.35, 48.86] ] } ...



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