Issues with toggling layers with mapbox.js - javascript

I am having issues with toggling map layers with mapbox.js. Using the code from [https://www.mapbox.com/mapbox.js/example/v1.0.0/layers/] it pulls the basic mapbox base maps ex. mapbox.outdoors or mapbox.satellite as toggle layers, but the polygons on the personal map layer does not appear. I know that the map can be pulled by itself, but when I try to add it to a toggling map, the polygons do not appear. I am not sure if it is a problem with the code itself that isn't allowing my personal map to show, or if there is an issue with my mapbox map.
My github repository is https://github.com/beyeraut/mappingmv/blob/gh-pages/attempt.html
Any ideas are welcome!

Related

Does leaflet allow me to control the types of roads shown?

I want to control which types of roads show from this OSM highways list at various zoom levels.
I could not find the answer in the Leaflet docs. If you do, please link me.
edit:
Maybe i need to go one step back in the making stack and use one of these frameworks? http://wiki.openstreetmap.org/wiki/Frameworks#Generating_map_images
It is not possible to alter displayed map style in Leaflet.
Probably the fastest way to achieve your goal is:
Create your map style in Mabox Studio, where you will specify the road types to be displayed at various zoom levels. Mapbox will render the map tiles for you and expose them via URL.
then display the tiles created in Mapbox Studio in Leaflet (or Mapbox.js which is build above leaflet) simply by altering the map tiles URL you use when you initialize leaflet.

How to create a store map using LeafLet

Im looking to create a map that can be interactive.
The best option that I found is leaflet, the thing is I don't find any resource explaining how to create my own map.
Im looking to create a mall map where user can see all the stores, fountain ...
How could I achieve that ?
The best place to start would be the Leaflet examples page:
http://leafletjs.com/examples.html
Here is the quick start guide: http://leafletjs.com/examples/quick-start.html
Update
To create an indoor map, you can use tools such as QGis and Mapbox Studio to build the map and generate the map tiles(used for web). Then you can use your custom map tiles as a tile layer in leaflet to provide zoom in/out functionality and markers.

Pie chart instead of markercluster icons in google maps

I have a requirement where I would need to create a google map with markers clustering functionality.
The change here is customising the cluster with the pie chart instead of the default cluster.
Say for example,
I have markers of different category and I need to show the cluster containing the number in each category similar to the one shown in the following links
http://bl.ocks.org/gisminister/10001728
http://www.ilfattoquotidiano.it/patrie-galere-deaths-italian-prisons-since-2002-2012/
but with google maps. How can I do this? I have no clue of doing it.
Thanks in advance.
I had to fulfil the exact same requirement so I solved it by extending the Google Maps Marker Cluster Library. You can download the solution from my GitHub repository: https://github.com/hassanlatif/chart-marker-clusterer

Google maps v3: Show multiple markers at once

I'm using Google Maps API v3 to add markers to a map.
All the markers have a custom image as the icon.
I have some filters that the users can click to hide/show the markers on the map.
Basically what I do on the filters is iterate the markers collection and call setVisible for all of them (with true/false accordingly).
The problem I'm having is that when I hide several markers they all disappear at once but when I show the icons they show up slowly (it takes a couple of seconds for 40 markers to become visible).
Is there a way to make all the markers appear at once?
I thought about using a MarkerManager, but it seems to be oriented to something different.
Thanks for your help.
Try markerclusterer.js from google. Demo example in here. Hope it helps.

Make google maps polyline appear below street names?

I'm making a subway map. The "transit" option on the official google maps shows their polyline below street/town names, but I can't figure out how to make mine do the same. Changing the zIndex to 0 (or negative numbers) doesn't work. Anyone know how to do this? Thanks.
Google Maps has several panes where the map components are being placed. Unfortunately for you the map tiles are placed below all those panes. Z-index has no effect if something is in higher pane, it only affects the order of overlays in the same pane.
Moreover map tiles are single images where all the map data are rendered. Therefore you can't place an overlay below some of the data rendered on the map tiles.
Theoretically, there might be a way to achieve this, but it's very difficult and I'm not even sure if it would work. Using styled maps you could create a base map type and an overlay map type. And then you could try to place the polylines between those two map types. Be sure there are many drawbacks:
I haven't tried to use styled map as an overlay map type so I'm not sure it would work.
Overlay map type is placed in the lowest map pane just above the base map. But polylines that are offered by Google Maps are rendered in higher pane and you can't place them into the lowest map pane.
Therefore it would be necessary to create your own special overlay layer or overlay map type containing the polylines. That is a lot of work! And then add it to the lowest map pane below the overlay map type.
OK, that's theory. Lots of hacking and uncertain outcome. I wouldn't do it that way!

Categories

Resources