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.
Related
I recently set up a non geographical map with leaflet using an image layer. This obviously is a stupid decision working with 'bigger' maps due to high memory usage and the need to load the big image file so I decided to use a tile layer instead.
Working mostly as expected aside from one thing: I can't seem to be able to drag outside of the map, it just jumps back so the map covers the screen. I'm not sure what causes that as I read that this behaviour usually needs to be set manually using maxBounds. Tried setting that to null, doesn't change. The only new thing introduced is Leaflet Rastercoords (https://github.com/commenthol/leaflet-rastercoords) which I'm unsure if that's causing the problems.
Any way to resolve that? Not sure where to look next.Thank you!
I achieved the behaviour you want using the following work around:
map.setMaxBounds(null); //map being the leaflet map.
This need to be called after the initialization of the map and of the raster coords layer.
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'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
Using the google maps v3 javascript API, it's possible to add 'GroundOverlays' as a picture. Have a look here:
http://jsfiddle.net/9YYJB/1/
However, I'm working on a project where I'm trying to add a texture to the whole world map. Obviously I can add a single, absolutely massive gif/png overlay but I'd rather add a tiling texture. I've been digging around in the API and can't find any way to do this.
Anyone have any ideas on how this could be done?
Thanks very much
Yes, what you want to use is an image map type. This allows you to add tiles on top of the regular Google Base Map. If you want to completely replace the Google tiles, you would need to implement a Custom Map Type. My favorite example of that is the Liberty City Map.