I'm planning a website which will use huge schematics, that is, raster images that are not photos. If they were photos and I were interested on displaying them as so, I would use either zoomify, IIPImage or PanoJS. Although all of these solutions offer HTML5 support, they are not entirely satisfactory for my purposes, as they are optimized for JPEGs, use arcane JavaScript or have non-smooth transitions.
So, I was thinking that perhaps I could use leaflet with custom tiles. That is, instead of connecting the javascript to a map server, I could connect it to my own tile-provider with the schematics. My rationale is that leaflet provides smooth rendering, the used tile pieces seem to be png, and that I could even use markers and vector layers. But I came to a stumbling block:
What kind of tiles leaflet expects? Where is information about that? Would the map projection, or other geo-specific aspects that I'm not aware of, be a problem?
Thanks in advance for any help.
Found it!
http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
Related
I would like to use this fork (updated to work with latest Leaflet version) of the Leaflet Zoomify plugin to display a custom map (huge texture ~30000x70000).
I need to work on the map with geo coordinates (to set markers) and wonder what's the best way to do it, since there is no way to set offset, scale or boundaries when initialising it through the plugin.
Initially I thought there should be a way in Leaflet to calibrate a TileLayer just like it's possible with ImageOverlay by setting the image bounds. But that doesn't seem to be the case.
Is this something the plugin should to take care of? In which case I would raise an issue in the repo.
I also saw the conversion methods
in Leaflet. I'm wondering if the best way to go is to convert the geo coordinates to pixels using those methods?
I'm also open to switch to another file format and plugin.
Any advice is highly appreciated.
Thanks a lot!
After all, I went on a totally different route without Zoomify, which I think makes more sense in my case.
I used QGIS to geo-reference my custom layer and export it as GeoTIFF following this tutorial. I uploaded it to Mapbox and baked it into a map style while mixing it with additional map features from Mapbox/OSM.
I'm looking for a way to create a zoomable, draggable and customisable (add pins, draw trails, etc...) map using my own pictures (taken from various game maps).
I've found out about OpenLayers but I'm completely lost on how to use my custom files. I've also heard about tiles naming convention but I'm a bit lost too
Could someone provide some input on what external script I could use (does OpenLayers fit my needs?) and how should I get started?
Thanks in advance
Google has a pretty cool exemple of their Google Maps API on the moon. You can find it here and it should be enough to get you started. It's using custom images and the code is documented, have fun :)
I never used OpenLayers so I can't really help on that part, but you should try Google Maps first and see if It fits your needs. If not, you'll probably have more specific questions which OpenLayers might answer.
I have made a map with a lot of clickable markers (with popups) in WebGLEarth (http://www.webglearth.org/api) and I would like to have three satellite tracks around my globe. It is important that you clearly see that it is a satellite hovering somewhere (where doesn't really matter and it doesn't have to move). So, something like https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML.html&label=Showcases
However, WebGLEarth does not include a tool to do this. Adding a polygon won't work (guess it's a bug) and lines are not included yet. Also changing the marker into another icon does not work as there is only one standard marker (as far as I know). There is a request to make webglearth a proper leafletjs plugin, but of course, I would like to make my map now.
Someone has an idea on how to do this? Maybe a hint on how to combine WebGLEarth with Cesiumjs or Leafletjs ? Thanks in advance!
Disclaimer: I'm a core Cesium developer.
WebGLEarth is simply a light wrapper around Cesium to mimic a subset of the Leaflet API. It's maintained by an independent third-party and not officially supported by anyone from the Cesium or Leaflet teams. My recommendation would be to drop WebGLEarth and switch to using Cesium directly (or Leaflet, but I assume you want 3D). Anything you are currently doing with WebGLEarth should be easy to port to the native Cesium API.
I've been searching but cannot seem to find a solution.
I have a GeoJSON file which is 170mb in size. It contains about 2500 polygons. Somehow I need to render it to a leaflet map. Evidently at that size I have no chance.
What will the easiest way to render this data? Am I able to create a complete transparent png which can simply be rendered over the world map. The huge size is due to the complexity and the number of polygons. At this point I don't need it to be interactive.
Thanks,
Brian
The easiest way is to create your own map tiles based on that data. There are a couple of ways of achieving this but my suggestion is that you use TileMill. It's free and very easy to use. So, basically you would:
Use TileMill and specify your GeoJSON file as the data-source
Configure how the map should be displayed (like the color of the polygons) with a special CSS-like language inside TileMill
Generate the tiles
Load a new TileLayer in your Leaflet map that references your files
I've actually written a tutorial some time ago that uses a .shp instead of a GeoJson, but should be similar enough:
http://build-failed.blogspot.pt/2012/03/custom-map-tiles-part-2-tilemill.html
I cannot argue with psousa's recommendation. For a straightforward presentation, TileMill is a great idea.
However, if you want to overlay your polygons onto another map, I reckon the only way is by using Mike Bostock's TopoJSON and D3.
The main TopoJSON page:
https://github.com/mbostock/topojson/wiki
An example at the scale you are talking about:
http://bl.ocks.org/mbostock/4206573
You'll have to shop around Mike's excellent examples on github to see how to combine leaflet with a D3 overlay.
I'm currently doing this successfully with hundreds of complex polygons. Haven't had the need to break into the thousands ... yet.
There is also geojson-vt, which apparently can to the tiling serverless on-the-fly - after a bit of loading time.
Just another humble suggestion.
I had successfully done loading 10000+ polygons and querying attributes by rolling out my own Geoserver and PostgreSQL DB + PostGIS instance and producing a WMS (not WFS), as you can see in the image.
But it is not straightforward to implement, especially if the geojson data is the original (and only) data
In that regard I would second psousa's answer to use TileMill.
I would like to implement a little map "like" Google Maps. Its a fictive one (Game Map). I should have the ability to zoom and move around. Also i would like to be able to put some markes on it and do a very basic routing.
My question is now purly conceptual. How would you realize this?
Map as background that scales and moves. Then an overlay like a Canvas object to draw over it? Somene has experience with this? I don't really know if this is the right approach.
Thank You.
Have you ever used a program called Impact?
its really useful when building games in HTML5
http://impactjs.com/
I don't fully get what you want but with jVectorMap ou can create you own vector(!) maps with markers and custom colors.
So I think it will help you.