I'm new to using Leaflet after having made some interactive choropleth maps using Mapbox's TileMill. If I add a custom polygon layer through using geoJSON, is there any way for me to symbolize (i.e. color) polygons based on values in a linked spreadsheet? What I'm trying to do is find a way to create an online interactive choropleth that can be automatically updated with current data just by making changes to a spreadsheet (i.e. Google doc) rather than adding a new geoJSON layer. Thank you for your help!
You can request your Google Spreadsheet data as JSON and then parse the data on the client-side, updating the data inside your geoJSON. Here's some more documentation via Google. Basically you'd call the spreadsheet, pass the spreadsheet data as JSON to a callback function, then have that function update your geoJSON with the new values. The basic API looks like this, where feed is the type of feed (either list or cell) you'd want and key is your Google Spreadsheet's key.
http://spreadsheets.google.com/feeds/feed/key/worksheet/public/basic?alt=json-in-script&callback=myFunc
It seems like you might have two different Qs there, and since I can't comment to ask for clarification, here are answers to both:
If you're referring to updating colors in Tilemill, then (the title of your question shouldn't refer to Leaflet, and) there's a pretty good workflow here for using a google spreadsheet as a Tilemill data source. Unfortunately though, fill colors are not data-driven properties, so you'll still need to assign colors conditionally in CartoCSS.
If you're referring to updating a thematic layer in the Leaflet client, then there are two options:
Write a script to populate this function and this line with values brought in from your google spreadsheet endpoint.
Use CartoDB. It does pretty much all of what your referring to, with live changes on a leaflet map as you update the table and CartoCSS styles. You can also synchronize a CartoDB table with a google spreadsheet.
Related
So I'm attempting to get Mapbox working with my Leaflet implementation (using React Leaflet), and my spidey sense is telling me something is off.
The URL:
https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/11/568/825#2x.jpg?access_token=pk.eyJ1IjoiamFtaWxsZXI2MTkiLCJhIjoiY2t3Y3JnbG5uMzZ2MzJ1bmhyaHhpczJpcCJ9.3X8OkNioN_C8CN15YPmDDQ
Note: I created the access_token used above for this SO question, and will be deleted soon. So the link may not work when you see this, which is why I used SO's handy dandy image upload!
I assume this has something to do with how the tile coordinates and/or zoom is being calculated, but really, I don't have a damn clue in the world.
Using mapbox.mapbox-streets-v4 as the tileset_id produces results that are better, but still bad. I haven't yet been able to load a stylesheet either...
What gives?
As it turns out I was correct in my hunch that it had something to do with how the tiles were being generated by Leaflet. And while I'll probably never know the specific reasons behind it, I was able to solve it. The secret sauce ended up being mapbox-gl-leaflet.
I threw together a super simple example on Code Sandbox showing the successful implementation of Mapbox tiles as a React component within React Leaflet. It's pretty snazzy, IMO, even if you have to import a few hundred different packages (doubly if using TS) to make it all work 😕
https://codesandbox.io/s/sharp-payne-m3hll
NOTE: To see the codesandbox link working, you'll need to supply your own Mapbox API key. The API key from above won't work (even if it was still valid, which it may or may not be depending on how much I care to do anything about it...)
The mapbox.mapbox-streets-v11 tileset from Mapbox is originally intended to be used as vector data, e.g. with Mapbox Vector Tiles API : https://docs.mapbox.com/help/glossary/vector-tiles-api/
The only difference with your URL is the requested format mvt (instead of jpg). And no #2x resolution modifier.
What may be confusing is that the vector tilesets can also be requested as raster, by specifying a raster format like jpg or png through Mapbox Raster Tiles API https://docs.mapbox.com/help/glossary/raster-tiles-api/.
Mapbox server then generates an image from the vector data. But in the case of the streets tileset, it has a lot of data in hand, and it renders all of it, making it appear messed up.
Mapbox provides 5 default tilesets (https://docs.mapbox.com/studio-manual/reference/tilesets/), some of them are raster only (typically Satellite mapbox.satellite) while others are originally vector, but can also be generated as raster (Streets, Terrain, Terrain-RGB/elevation, Traffic).
Unfortunately Leaflet does not handle vector data built-in. If you really need to use vector data, you have to use plugins like Leaflet.VectorGrid or Mapbox GL Leaflet, or another switch to another mapping library.
I use a Mapbox dataset converted to a tileset to show features on a map. I would like to add a search facility which goes through all the features in the dataset (not only the one shown on the screen which I could search locally thanks to queryRenderedFeatures).
I do not see how to do this without implementing my own search facility server side. I would like to avoid that because it would mean my dataset needs to be stored at two different places (on Mapbox and on my server).
In this related question, someone suggested to use querySourceFeatures but it only checks features in the currently visible viewport.
Did I miss any search through dataset facility offered by Mapbox ?
You could use the Datasets API to download you whole GeoJSON dataset to the client, then using the mapbox-gl-geocoder's localGeocoder option implement you own custom search.
Is it possible to download OSM or embed OSM and use leafletjs on top of it to display heat map?
I have searched a lot and could not find anything related. I wanted something like this form Google Maps.
https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap
I did find the mapbox but we need to pay them. I need something open source.
Please suggest me.
You can create heatmaps with Leaflet by using the various available plugins:
http://leafletjs.com/plugins.html#heatmaps
However, you'll need some vector data to build a heatmap, not just the tilelayer. If you want to use OpenStreetMap to get your data, try a service like http://overpass-turbo.eu/ to download the things you want in this format.
for my next project I'm looking for maps, that contains only frontiers of countrys, lakes, hills ans rivers.
Can I get such kind of maps with the OpenStreet-API?
best regards
The "OpenStreetMap API" provides map data, not map images. So, for the imagery you want, you either need to find a source that renders the style you want, or render your own.
I don't know of any services that provide exactly the render that you're looking for. However, it should be very easy to render your own tiles that do this - if you install TileMill and follow through the tutorial, you will find it very easy to delete layers from the default style until no names are included in the style.
Note that if you're planning on running a web service, you'll also need to serve your special new map tiles to your users.
I just want to build a drill down map like this - Drill Down Map
Here I want to show some data on tapping of each regions.I am out of clue. How can I ? What should I use ? From where to start ?
EDIT : In the link it's showing the country name on mouse over, instead of that I want to show some data/info of the country on touch. Please visit the map shown in the link,you'll get the whole idea.
Thanks !!
If you want total control on the map layout, and be able to check which country the users taps, there's no secret : you need to have boundaries of all countries you want to detect.
Here's the global approach I would use to reimplement something that looks like the map you linked to (I can you into more details if you want, but at first, here's the global approach) :
Get the data of the boundaries of the countries you need. This can be done using OpenStreetMap.org data.
[EDIT] I just came accross this website to download countries boundaries as files you can then use with tilemill : http://www.gadm.org/country
Use this data with tilemill (http://mapbox.com/tilemill/) : this tool is able to design maps using a language that looks like CSS but dedicated for maps. The results is great and the tool great as well. This tool also support shapes files, so if you can get the countries boundaries as shapefiles, you'll be able to use them with tilemill, and this will be easier than using .osm files from open street map). Have a look here http://mapbox.com/tilemill/data/ for the supported formats.
Then, with tilemill, export your map as an MBTile file (this file contains all tiles needed to get the map rendered at different zoom levels).
Use the route-me project to display the resulting MBTile file (in its latest version, route-me is able to do that, this feature has been implemented by the mapbox team to support their open format MBTile).
Guys from Mapbox have published a good tutorial "from data to maps" here : http://mapbox.com/demo/making_massredistrict/ this may help as well
Your best bet is to use CloudMade ( http://cloudmade.com/ ). They provide custom map builders program where you can build custom maps and can integrate those maps in your iOS app.
Depends what you are looking for. To implement the linked example it's enough with a giant image that you can split in tiles using CATiledLayer. You'll find examples if you google a little, PhotoScroller is one. If you want to display real maps you have to investigate the route me project.
I don't think that using images could be good option.Check this link - arcgis-iphone api. I am not so sure but you can get some idea from this.
Happy to help..