Tag Info

New answers tagged

2

I also haven't been able to get L.mapbox.featureLayer() to load vectors I've uploaded to MapBox. Vector Tile source .mbtiles files are no longer .geojsons but have been converted into a bunch of tiled .svgs combined into one .mbtiles file, so I'm not sure if mapbox.js has the ability to render vector .mbtiles the same was it renders hosted .geojson files. ...


1

what about L.mapbox.featureLayer('your_id').addTo(map); Just tested it again and it works fine. Have you added these two lines with the up to date API and CSS? <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script> <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />


0

For fix this issue need add if(!obj.overlay) { obj.layer.setZIndex(0); } code in leaflet.groupedlayercontrol.js file of Leaflet.groupedlayercontrol plugin. See fixed example http://spatialhast.github.io/leaflet.groupedlayercontrol.html. For Leaflet.groupedlayercontrol created pull request https://github.com/ismyrnow/Leaflet.groupedlayercontrol/pull/16


0

I find solution, code below (or live example http://spatialhast.github.io/leaflet.swipe.html): <script> var BingLayer = L.TileLayer.extend({ getTileUrl: function(tilePoint) { this._adjustTilePoint(tilePoint); return L.Util.template(this._url, { s: this._getSubdomain(tilePoint), q: ...


0

please forgive the product promotion, but if you'd like to skip administering the database you might consider trying Esri's cloud hosted feature service storage and open source Esri Leaflet plugin to write in the features. afterward you can execute both SQL and spatial queries and specify GeoJSON as the output format. here's a sample which incorporates the ...


0

I'm not a MapBox-User, but the syntax to get the feature layer seems to be a bit different: https://www.mapbox.com/mapbox.js/api/v1.6.1/l-mapbox-featurelayer/ Try this: var featureLayer = L.mapbox.featureLayer() // loads markers from the map `examples.map-0l53fhk2` on Mapbox, // if that map has markers featureLayer.loadID('examples.map-0l53fhk2');


0

You could just add another standard marker to see the correct location: http://jsfiddle.net/expedio/my565p1m/ If the location of your divIcon is ok, remove the standard marker again ;)


0

Here are a couple of thoughts on what you can do to boost performance: Send a BBox to server and return only points within it Use a library like turf.js http://turfjs.org/ on the client to only draw points within the maps current BBox Marker Clustering https://github.com/Leaflet/Leaflet.markercluster Use SVG icons instead of images Only return geometry and ...


0

You can change your style function to accept another parameter, and use that to set your style. When the user wants to change the rendering, you just call .setStyle(feature, color). You will also need to create a function to define the colors for that dataset as well. For example, I'm using a function name of getGenderColor(). Example: function ...


1

You can use QGIS software and its plugin called Qtiles to convert your shapefile into tiles. https://plugins.qgis.org/plugins/qtiles/


0

You should probably look into OpenLayers 3. You can look at the code of examples by using CTRL + U: The code does not look too complex either: http://openlayers.org/en/v3.1.1/examples/layer-swipe.html


0

For OpenLayers have a look at this example: http://tools.geofabrik.de/mc/


0

There's an excellent new tutorial about named maps in this link


0

You can still use L.control, you just need to extend it and create the select within the control. I cannot claim this as my own, but here is a JSFIDDLE. I found the link as it was reported as an issue in the Leaflet GitHub page. Notice how you create the innerHTML for the control div: var div = L.DomUtil.create('div', 'info legend'); div.innerHTML = ...


0

you can add a zoom listener to your map to change the icons at different zoom levels. Here is a simplified example. You can change the conditions and icons to fit your project: <html> <head> <meta charset=utf-8 /> <title>Simple FeatureLayer</title> <meta name='viewport' ...


0

Maybe this pattern will help? If alert on .done is showing the expected result, you should be able to pass CompareObj to a new function (also from within the .done function), and evaluate the global CompareObj from there. No need to worry about asynchronous response in that case, since the new function won't execute until AJAX is done. // declare this as a ...


2

You should declare the variable rlayer outside of the easybutton function. Try that: var rlayer = null; L.easyButton('fa-level-up', function() { if(rlayer) { map.removeLayer(rlayer); rlayer = null; } else { var routing = L.Routing.control(...); rlayer = L.layerGroup([routing]); map.addLayer(rlayer); } }, 'Display ...


0

I'd suggest going with your second approach of putting your svg markup in-line. I think your jQuery prepend method doesn't work because you need to create <defs> and other children of <svg> elements using document.createElementNS and jQuery is probably using document.createElement. Anyway, the piece you're missing is applying your filter to your ...


1

For every unique sql request to your cartodb account, it creates a new "id". If you use the cartodb.Tiles.getTiles function, it will return an object containing the PNG url (tiles.tiles[0]) and the .grid.json url (tiles.grid[0][0]) Check out the example at http://docs.cartodb.com/cartodb-platform/cartodb-js.html#cartodbtilesgettileslayeroptions-callback ...


0

When you use mapbox as your tile-source the url for your TileLayer holds your mapid prefixed with your username. For me the mapbox id would be vannut.12345. The id can be found within your mapbox account. So the url for your tile-layer would then become: http://{s}.tiles.mapbox.com/v3/vannut.12345/{z}/{x}/{y}.png ...


3

You could use the Leaflet search control. It allows you to insert a search widget on your map, search by place names around the world (see Nominatim example), and once a place is selected, zoom/center your map to that place location. In the Leaflet search's GitHub website you find examples on how to add the control to your leaflet map.


0

You can't setSQL with named maps. However, there are other ways :) Basically, what you've to do is to create several SQL queries as named map (instead of changing sql in runtime). So, you can maintain data privacy. I've just created an example for you. It's the layer selector example, but using named maps. You can check it in this link.


3

To learn more about the Rest-Module of geoserver i can recommend you this website: http://geoserver.geo-solutions.it/edu/en/rest/using_rest.html but I guess that you just want to load a WFS-Layer into your Leaflet-map, so you can have a look at this post: http://blog.georepublic.info/2012/leaflet-example-with-wfs-t/ Here the Requests for the WFS-layer are ...


0

Your code syntax is incorrect. Please, verify it and check blocks. I'm attaching a snapshot about it (because of that this is an answer, and not a comment)


0

This tutorial serves as a good example: 1) As shown in the example, set up your base layers with a variable name that can be accessed in the function where you want to switch them programmatically. var grayscale = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution}), streets = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: ...


0

I recommend you to take a look at this Maps API: http://docs.cartodb.com/cartodb-platform/maps-api.html The URLs are generated with your username and the layergroup ID. You can get it in the response of the system when you instantiate a map with a curl request like, for example: mapconfig.json: { "version": "1.0.1", "layers": [{ "type": "cartodb", ...


0

i might be misunderstanding you, but if you're talking about querying a service for feature JSON dynamically based on the current extent of the map, in esri leaflet we create a tile grid so that we can repeatedly pass identical queries when possible to leverage browser based caching. you can see the relevant section of the open source leaflet plugin API ...


0

disclaimer: i work for esri and help maintain esri leaflet. opinion: it would also be extremely straightforward and cost effective to use ArcGIS Online to publish the points in a queryable, but not editable hosted feature service and use our leaflet plugins to authenticate and display the data. ...


0

You don't really need to use WMTS, if you're reading from GeoServer. GeoServer does the same caching for both WMTS and WMS, so just using a Leaflet WMS reader will work fine.


0

You might want to look at UTFGrid, a format to encode, among many things, clickable areas or points in an efficient, tiled manner. UTFGrid was created by Mapbox, so it's supported by tools you already use.


0

You can create or import routes on bikemap.net. After that, export them as GPX, load the GPX file in geojson.io, and save it as GeoJSON. You can add as many GPX files as you want to a single GeoJSON.


0

Well the idea is to display additional GeoJSON layers over the built-in GraphHopper ones. Here is the code, https://graphhopper.com/#community and what i am trying to do is to get an additional layer to display POI information from a GeoJSON file. Here is a sample of the information available in the GeoJSON file : {"type": "Feature", "properties": { ...


1

Don't know how to resolve your script, but here's a simple page on my end that's shorter, doesn't need leaflet-src.js, and is working just fine: <html> <head> <link rel="stylesheet" href="lib/leaflet.css" /> </head> <style> body { padding: 0; margin: 0; } html, body, #map { ...


1

"handle" is in the properties of the feature, so it just needs to be d.properties.handle Try: feature.attr("class", function (d) { return "code " + d.properties.handle; });


0

if you mean iterate over all the individual points in an L.markerClusterGroup(), you can use something like this to access the individual layers markers.eachLayer(function(layer){ console.log(layer) }); If you want to get at the points/layers in an individual cluster, you can use getAllChildMarkers() markers.on('clusterclick', function (a) { ...


2

Popup fade out animation is included for the coming 0.8 release.


2

Yes. You have to send your data from the client to the server and let server-code handle the database-insert. You should look into HTTP POST through jQuery or other libraries as a way to asynchronously send your data from the client to the server.


1

Setting bounds for the layer solves the problem. Because leaflet will not try to fetch tiles out of the specified bounds var southWest = L.latLng(13.02504085518189, 80.23609399795532), northEast = L.latLng(13.026849183135116, 80.23797690868378), bounds = L.latLngBounds(southWest, northEast); L.tileLayer('static/b18/{z}/{x}/{y}.png', { maxZoom:22, ...


2

change the easy button function to: L.easyButton('fa-compass', function (){ $('.leaflet-routing-container').is(':visible') ? route.removeFrom(map) : route.addTo(map) }, 'Routing' ); This just applies a simple ternary operator to determine whether to add or remove the route control (and uses jQuery to detect the visibility of the routing ...


2

leaflet does support onmouseup event. i just used your code and modified a bit to remove eventListener on mouseup. now it's working fine even if you pan your map. circle.on({ mousedown: function () { map.on('mousemove', function (e) { circle.setLatLng(e.latlng); }); } }); map.on('mouseup',function(e){ ...


1

To make a circle draggable, you can add an event listener with a method for mousedown and one for click (from what I've seen, Leaflet doesn't support mouseup for Path layers). Inside the mousedown event, add a function to get the position of the circle from the current mouse position. Inside the click event, remove the previous event listener to make the ...


0

Leaflet works as designed. It's normal that it tries to download tiles when you zoom in and out. You have to set minZoom and maxZoom in the map options so that they match the zoom levels in static/b18/ folder You can also set maxNativeZoom in your TileLayer options (http://leafletjs.com/reference.html#tilelayer) so that leaflet expand existing tiles in ...


0

I needed to use latlng fit to bounds. http://leafletjs.com/reference.html#latlngbounds


1

It seems like the feature data was not passed to the addData function. If I change this function onEachFeature(feature, layer) { layer.on({ click: addData }); } to this function onEachFeature(feature, layer) { layer.on ('click', function(e) { addData(feature) }); } then it works. I changed the onclick notation a bit ...


1

As far as I can see, you not seeing anything, because you're not adding your GeoJSON layer to the markerClusterGroup. According to the instructions, the following steps are needed: var markers = new L.MarkerClusterGroup(); markers.addLayer(new L.Marker(getRandomLatLng(map))); map.addLayer(markers); Translated to your case, I would try something along the ...


1

Your syntax for the promise is correct (example below) but there are a few other possible issues. You're trying to use geojsonfeatures before your geojson is available when you create the variable named points. Pass an error handler to your promise's then method to catch errors from the call to getJSON (example below). Verify your geojson is valid by using ...


0

The proper way in this example is to create the tiles with the command mb-util --grid_callback="" --scheme=xyz /folder/tile.mbtiles /var/www/html/my-tiles where "--scheme=xyz" is the standard. Furthermore make sure to call both the index.html as well as the utfgrid tiles from the same "server". So make sure to call http://localhost/index.html in your ...


1

This is just a conflict in the resources you're adding: script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"> script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.11/cartodb.js"> CartoDB.js includes leaflet, so you need to delete Leaflet.js to avoid conflicts.



Top 50 recent answers are included