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.
Related
I want to make an interactive map web application for a game that I play. Basically I want it to be a kind of Google maps clone, where I have a vector-based graphic of the region area and I can zoom in and out to reveal certain level of detail.
My research into map APIs has returned little results. OpenStreetMaps and Google Maps only allow custom maps with real geolocation data. My project requires the creation of a map with nonexistent locations. Does anyone have a suggestion on how to approach this? Thanks.
I think you can use "real" GPS coordinates and then customise the base layer beneath. The GPS Lat Long coordinates (between -90 and +90 each) offer as good a scale as any to then locate your fictional positions.
Google Maps has an API that allows putting custom layers and base maps here:
https://developers.google.com/maps/documentation/javascript/maptypes#CustomMapTypes
OpenStreetMaps will also allow this. Some recommended guides available here:
https://switch2osm.org/serving-tiles/
Good luck!
I want to add a 3D layer showing cloud location and elevation on a Google Maps.
The idea is that when you tilt the map (ctrl+drag in Earth mode) you could see how high each cloud is.
I found this article which explains how to add 3D buildings but it's "fakes", cheating with the latitudes to get some height effect:
http://johndyer.name/drawing-3d-objects-and-building-on-google-maps/
I couldn't find anything up to date in the doc.
Google seems to be silent about 3D features in Javascript API. Closest I can get to this are Styled Maps but nowhere does it specifically indicate 3D. Only Android implementations are available as of now.
I did some research and found this library which help you build 2D and 3D: https://github.com/OSMBuildings/OSMBuildings
Another option is Cesium JS:
An open-source JavaScript library for world-class 3D globes and maps
https://cesiumjs.org/
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.
I have a small issue in the application I am building currently, and I can't figure out what's the problem.
I am using leaflet for displaying the map, with a Google Maps layer as a map.
My problem is that when I am zooming in or out of the map, the actual maps move directly but it takes almost a second before the markers layer gets updated too.
You can reproduce my problem easily on this test server, by choosing on of the points of interest, and zooming in or out when the points are displayed.
I haven't found any reference of this problem on the internet so far. Do you have any idea where this could come from ?
Thanks!
This is using a Google Maps layer, which means it wraps the Google Maps API. Since the Google Maps API zooms at a different speed than Leaflet, you see this effect.
There's no quick fix here: it's just not a very good idea to use the Google Maps API within Leaflet, technically or legally. Either use Leaflet with tiles that can be used directly with it - OSM, MapQuest, Stamen, Mapbox - or use the Google Maps API.
We need to create a map of the small town from raster file. Our client deny usage of known API such as Google Maps, OSM, etc. There is little time before the deadline. What is the quickest way to create a small web map from the picture? Some kind of JavaScript framework?
Requires: drag, zoom and markers.
It is very desirable to do this without a big fat server such as MapServer or GeoServer, because we dont have a much time to redraw map in this format.
Absolutely easiest way is to create an OpenLayers map with Image layer. Here is an example of how it works.
Consider though that whole image is being loaded to the client before OpenLayers can manipulate it. So it's probably not the best option if it's a huge image.
Other option would be to create a tile pyramide with MapTiler which you can then simply host on your webserver(no need for MapServer or GeoServer) and then use TileCache layer in OpenLayers to display tiles on map. MapTiler creates OpenLayers example with all necessary settings when you tile image with it.