Leafletjs: Dynamically changing map feature colors - maps

It's been a few days now that I have been looking for a way to be able to dynamically change the colors of different map features such as Roads, Water, Buildings, Background etc using leaflet.js. I know we had this option in Mapbox using the Mapbox GL. But I am wondering if this can be achieved using the leaflet.js library.
Any help/workaround would be highly appreciated.
Thanks

By default Leaflet can render only raster tiles (i.e. plain images, which you cannot easily modify) and vector shapes (typically from GeoJSON data).
If you want to modify the tiles rendering, you have mainly 3 options:
Download OSM data and re-render the tiles (i.e. create your own tile server) using your own styling. OSM wiki should have some pages that explain how to do so.
Use an online service that offers tiles rendering with custom style (e.g. Mapbox).
Use Leaflet.VectorGrid plugin with downloaded vector data from OSM and providing your own styling.
If you want to be able to modify the rendering at runtime, then only the 3rd option would be appropriate.

Related

First steps in mapbox

Good morning, I have been researching the mapbox tool for a short time and I have some initial doubts. I would appreciate if you could guide me. You will find the first one very basic: with mapbox studio we only create the styles that we are going to use later in mapbox GL?
How do I publish a GL mapbox javascript code on a web page, is there a possibility to package it in an iframe?
What is the difference between Datasets and Tilesets? In the documentation I have read that from Datasets Studio you can only upload 5MB files, to upload larger files you have to convert them into Tilesets. I have also read that Tilesets are a kind of raster data.
Those are my first questions about mapbox. Thank you very much in advance
With mapbox studio we only create the styles that we are going to use later in mapbox GL?
Yes - think of Mapbox Studio as "photoshop for maps" where you can design a map style for a variety of uses.
How do I publish a GL mapbox javascript code on a web page, is there a possibility to package it in an iframe?
You can wrap your mapbox code in a script tag in your html doc for a simple implementation - check out this demo.
It is also possible to package it in an iframe - Mapbox Studio can generate that code for you.
What is the difference between Datasets and Tilesets?
A Dataset is a collection of geojson features that you can edit individually. This is often something like a defined set of points with additional data attributes that you've uploaded. You can plot points directly on a map canvas, but will quickly hit performance limitations.
A Tileset is a collection of geojson, raster, or vector data contained in a uniform grid of "tiles" that are optimized for production maps. It's how Mapbox can load the data around the viewpoint without needing to load the entire world at once. Mapbox Studio allows you to export datasets as tilesets for use in a map as a separate layer.

Vector tiles support on keppler.gl

I am trying to use kepler as a viewer for my new application.
I’ve been scanning your redux app structure, so, I eventually realised there’s no easy way to create a custom reducer to load PBF vector tile layers, I’ve seen few commits working with pbf load on your git repositories so I’d wonder to know if there will be a future version supporting this functionality on kepler (deck already works with vector tiles), so in that case, if there is any release date for that.
Kind regards and thank you all.
One solution to your problem could be to add the vector tile layers to your Kepler.gl viz as a map style from your custom tileset created using Mapbox Studio. Once you create a style with a Mapbox GL Layer based on your custom tileset, you could use the custom Style URL as the map in your Kepler.gl viz.

Bing Map : generate local map tiles for US zip codes, counties, states in C# WPF Visual Studio 2013

I am trying to generate local map tiles for US states, counties and zipcodes so that I can mark them as polygons on Bing Map from C# Visual Studio 2013 WPF on win 7.
I am following the instructions at:
https://blogs.bing.com/maps/2015/08/24/local-tile-layers-in-bing-maps-wpf
http://research.microsoft.com/en-us/um/redmond/projects/mapcruncher/tutorial/version3.0docs/index.htm
https://msdn.microsoft.com/en-us/library/gg427619.aspx
I am tring to use thr MapCruncher make the tiles. But, I do not know how to get an image for a state, county, or zip code such that I can use the MapCruncher to get the map tiles.
I need images of them without borders because an image is normally a square with some white bounds around the state , county, or zip code polygon area.
Also, because I need to make all local map tiles for all US states, counties and zip codes. It is impossible to make them manually by the MapCruncher tool.
How to make them by MapCruncher code ? Or are there C# codes that can do these ?
Any help would be appreciated.
Thanks!
UPDATE
From the link of
https://xyllyg.dm2302.livefilestore.com/y3mmTyuxpIVtzGHj0t4gvQwZND2Ei2-lqB-TsyjedXzPnAujjXOMzKXnH5ZBjSO-47Ml2AOx1N5buA0iNxz_DfS7J9jn-hO_0Hxy2GG-BYwByJt7Z6LfWTXs7HDpaKG9vSpQuqPniJ6DVdddignj-3itM7VvWqnHOXoW6FESYMQ-No/Managing%20and%20Visualizing%20Geospatial%20Data%20with%20Bing%20Maps%20Whitepaper%20v01.pdf?psid=1
I have found the example in Section of "Thematic Maps from Bing SDS" at page 28.
But, the code example at https://code.msdn.microsoft.com/Managing-and-Visualizing-f42fdd5c
requires Visual Studio 2015, Windows Azure Storage, Apache Cordova, Bing Spatial Data Services .
These are not available in my working environment. Are there examples of Visual Studio 2013 ?
Also, how to use your techniques in Section of "Thematic Maps from Bing SDS" for OpenStreetmap ?
There are a lot of different ways to do what you want to do. If you want to overlay raw boundaries on top of the map you likely will run into performance issues if you try to render more then a few hundred detailed polygons such as counties or Zip codes. If you only want to view this data when zoomed in close you could load in the data as needed for where the user is viewing. You could upload the boundary data into the Bing Spatial Data Services and easily retrieve it from there.
If you want to be able to view the data at all zoom levels, then turning your data into a tile layer would be the best option. Since the data you will be working with is in vector form (raw data, not an image), MapCruncher won't work for you. Instead you will need to do one of the following:
Dynamically generate the tiles from the raw data on the fly. This will allow you to support all zoom levels without needing Petabyte's worth of storage. This is a great approach to use when you need tiles that cover a large area, or when the data changes regularly. In fact, the tiles used in Bing Maps do this as the storage requirements for 117 languages and all zoom levels would be in the 1000's of petabytes. I have a white paper outlining how to do this and code samples here:
https://onedrive.live.com/redir?resid=D35222484A76A01!361218&authkey=!AMEJsKW8h_HUbOg&ithint=file%2cpdf
https://onedrive.live.com/redir?resid=D35222484A76A01!323177&authkey=!AId01rJ-JPDPZMw&ithint=file%2czip
Use a tool to generate tiles from raw data. I have a code sample that does this here: http://mapstoolbox.codeplex.com/ Take a look at the WPF Spatial Data viewer. It allows you to load spatial data from different file formats and then generate map tiles out of it. Note that each zoom level has 4 times the map tiles as the zoom level before it. If you are looking to generate map tiles over the US, you will likely find that once you get to zoom level 8 or 9 you will need a lot of storage and the file system will likely be really slow. At that point you would need to look at storing the tiles in a database system to speed up querying the tiles. I would only recommend this approach if you only wanted tiles for a small area and a few zoom levels, otherwise the storage requirements will likely make this an unusable solution. If you do go this route you might want to look at storing the tiles in Azure blob storage as it is cheap and would allow you to store a lot of tiles much easier than you could on your local machine.
The dynamic tile approach would likely be your best option. You could try taking it a step further if you are only using WPF and generate the tiles in the app rather than in a web service, although using a web service would make it much easier to migrate your app to another platform in the future, such as Windows 10, or web. If you want to generate the tiles in the app, you can take the code from the white paper and integrate it with the code sample here: https://blogs.bing.com/maps/2015/08/24/local-tile-layers-in-bing-maps-wpf/

Dynamically rendering polygons server-side?

I'm trying to implement a polygon based heatmap (i.e., instead of the color transitioning smoothly between two points, the color is the same within each polygon and changes across polygons).
The polygon color will tell the user which area's of the map are "good" and which are "bad". Similar to what these guys are doing here (http://illustreets.co.uk/explore-england/).
However, the color of the polygons will depend on the user input. Therefore, they have to be rendered dynamically. I don't think that the client will be able to handle the rendering, so the rendering will have to happen on the server.
I'm currently exploring ArcGIS as an option.
Does anybody know how to accomplish what I need in ArcGIS (or any other products)?
It would be best if I can find sample code that does something similar.
Thanks!
Based on our discussion in the comments, I can suggest the D3.js library. It is designed to make dynamic visualization easy.
http://d3js.org/

Looking for a simple Silverlight map component

I am looking for a light-weight map component that displays a map of the US and allows users to click on a State and see information pertaining to that state. The data I want to display is in my database. I just need to know what state was selected so I can display the detail. This is something I am doing to get familiar with Silverlight.
All the searches for Silverlight/ Maps I have done so far have pointed me at solutions that are far more complicated than I need. My perception is that using Bing Maps to do this simple task would a waste of the features provide by Bing.
Anyone know of such a Component? Am I wrong that Bing Maps is not the right tool for the job?
TIA!
If you have access to Expression Studio (specifically Expression Design), creating maps as vector based images is quite easy. Poly-paths in Xaml are also relatively efficient to store and serve up compared to images.
You import a map as a background image and use the pen tool to dot-to-dot trace around the country. Combine all those path segments into a single path. Then create a separate poly-path for each state (close them to allow for a fill).
It will take a few hours to build all this (I know having done this for a world map country selector... took 4-5 hours solid for the one polygon styled below):
By having each state represented by a filled polygon-path highlighting (by changing the fill colour) is trivial on mouse-enter/mouse-leave events.
If you want stylistic map, remove the image, otherwise use transparency on the state polygons to show the map through the roll-overs.
Update:
And if you get yourself a graphic tablet and pen this sort of point-to-point work is about 5 times faster than with a mouse!
The interaction with Bing Maps in Silverlight is really strong and provide you with easy communication between the map and your data. I would give Bing Maps a try.
I'm not sure if you've already come across this, but it seems you can also use the control with custom tile sources. Here are a few resources.
http://www.cadmaps.com/gisblog/?p=54
http://developers.de/blogs/damir_dobric/archive/2009/11/16/implementing-custom-map-in-silverlight-map-control.aspx
http://labs.mandogroup.com/skinning-the-silverlight-bing-maps-control/
Custom Rendering in Bing Silverlight Control

Resources