OpenLayers 3 - Zoomify - Tiles - Getting started - javascript

I am new to OpenLayers and want to switch from Google Maps API.
Now I am trying to figure out how to place a big image into OpenLayers like I can do with the Google Maps API:
https://developers.google.com/maps/documentation/javascript/examples/maptype-image
I guess the dependance with OpenLayers is Zoomify, right?
http://openlayers.org/en/v3.0.0/examples/zoomify.html
Now I can't find any good How To or Get Started on Zoomify.
is there a good introduction on OpenLayers and Zoomify which I should know?
how do I need to slice the image into tiles?
can I name the tiles like I do for Google Maps?
I downloaded OL3 but the examples are not working. Do I need to compile something?

is there a good introduction on OpenLayers and Zoomify which I should know?
The OpenLayers 3 Quickstart and the OpenLayers 3 workshop
how do I need to slice the image into tiles?
Yes, there are various possibilities using PHP, Python and Ruby. See this blog post for PHP and Python links and Ruby at this GitHub repo.
can I name the tiles like I do for Google Maps?
No, Google Maps use specific tiles splitting and Zoomify don't use the same.
I downloaded OL3 but the examples are not working. Do I need to compile something?
No, just go to https://github.com/openlayers/ol3/releases/tag/v3.0.0. At the bottom, click on the v3.0.0.zip download link, unzip it. Put the directory on any webserver and open the examples directory and you will see all demos working.

You can use vips to generate Zoomify tile pyramids. There's a post on the vips blog explaining how to use the tool. For example:
vips dzsave myhugefile.tif output_directory --layout zoomify
will create a tile pyramid in the directory output_directory.
The vips pyramid creator is very fast and can build pyramids of images of any size using only a little memory.

Related

Decode MVT from the browser

I'm trying to decode MVT data from the browser, to use it in the Google Maps API. In Python, I'm using the following package:
import mapbox_vector_tile
mapbox_vector_tile.decode(mvt_data) # this returns a nice json
But I have not found a way to do this on the client-side (Web browser). I have taken a look to mapbox-gl-js, but I have not seen any way to do it like in Python. Although importing all those things for only a decoder of MVT maybe it's a little bit overkill.
I want to use MVT because right now we have an image tile server but we want to change it to a vector tile server. We are using Google Maps API.
Do you know some package or way to accomplish this?
https://github.com/mapbox/awesome-vector-tiles is a great resource for tools and libraries related to vector tiles. There are several libraries in there for parsing and rendering vector tiles. https://github.com/mapbox/vector-tile-js is a good option if you just want to read the content of a tile.

What technology/strategy should I use to render big GeoJSON files within google maps

I'm currently working on a project to display enriched geographical data within an interactive map. For example, I have housing blocks with additional information added, and I want to display this data within an interactive map. I chose google maps, because I don't have any experience in building a map-based webservice and google seemed to be easy accessible and working.
The problem comes with the amount of information i have. A single town like Berlin has about 450.000 geometrys, which results in a GeoJSON file roughly 170MB big. I know, that this isn't anywhere near to working.
Do you guys can give me a hint on how to structure the project? What kind of technology can I use to dynamically query the needed data? Are there any libraries or working solutions that I should give a try?
How I solved this issue:
I used mapnik to pre-render the tiles and displayed them in google maps using getTileURL. I used this tutorial, which explains the basics on how to use mapnik for google map tiles.

Use shapefile as a web map?

I am wondering if it's possible to use a shapefile with point features in arcmap as a web map?
I have seen examples, however most of them project the shapefile on top of a base layer map, for example, Google maps or ESRI maps. I am purely wanting to use the shapefile as a web map that supports zoom? Is this possible? If so, how would I go about achieving this?
The only method I can think of so far is to save the shapefile as a service to arcGIS for server...
Any guidance and help will be very helpful.
Thanks in advance.
You could start off by importing the shapefile into TileMill. Once you have styled the layer, you could export it as an MBTile and serve it with Mapbox.
I also found this description that you might find helpful.
http://blog.thematicmapping.org/2012/11/exploring-mapbox-stack-mbtiles-tilejson.html
Good Luck.
If there aren't too many points (more than a few hundred) then you probably want to generate GeoJSON from the shapefile and display the data that way.
You can convert your shapefile to geojson with the GDAL library.
ogr2ogr -f GeoJSON -t_srs crs:84 [name].geojson [name].shp
If there are more than a few hundred points, then I'd use #andrewGeo's strategy.
The easier thing to do would be to share the shapefile from a server like ArcGIS Server or GeoServer. GeoServer tends to be easier to share something simple, especially if you use the Boundless Geo (http://boundlessgeo.com/). That comes with GeoExplorer which can directly consume a shapefile from GeoServer.
Depending on the API you're using to generate the basemap, you can hardcode x/y information into it or consume a KML/KMZ. These tend to be tedious and not great if you're doing more than just viewing static data.
If you choose the server option, beware about hosting and consuming your data on the same server. You may run into Cross Domain issues and life becomes a little more complex then. I believe GeoExplorer automatically bypassed any issues I had with Cross Domain, but most of the other JavaScript APIs were a little more troublesome.
With the release of QGIS 3.8 there is new feature to generate raster MBTiles layers. Once the layer you want to convert is setup, you can open up the Toolbox by either selecting the gear icon or by going into the processing tab on the menu bar and selecting toolbox. Then in the Processing Toolbox, drill-down into the Raster Tools section. Within this section, select the Generate XYZ tile (MBTiles) option. Then you can serve it into mapbox (currently GeoServer does support serving MBTiles as well by installing the MBTiles extension)
Here is a reference to this with a straight forward and well-illustrated example on how to use this new QGIS feature.

Generating redistributable map images without a server

I want to make an app that allows users to download static images of maps and redistribute them in Anki flashcard decks. However, I'm having a tough time figuring out how to generate the map images without facing any licencing restrictions or running my own server. I want my app to be all client side JavaScript which rules out one of the solutions I've found so far. I've seen a way to use openlayers to export images from the canvas, however a proxy sever is required to convert the canvas to a dataURL so it can be saved.
The most promising option I've found so far is the MapQuest Open Static Maps API. However, I can't find much information about how open it really is. The OSM data is open, but I'm not sure about the images themselves, as they say copyright mapquest on them. Mapbox also has a static map API with licensing restrictions that are unclear to me.
I ended up using leaflet-image. leaflet-image can generate image dataURLs from leafletjs L.map objects using OSM tiles. It uses CORS to request the tiles and avoid tainting the canvas.
Thanks to #tyr for mentioning leaflet-image in his comment. The issues I mentioned in the comments have been resolved.
We developed a solution using TileMill to generate MBTiles files. We then developed a very simple PHP script, which opened the MBTiles (essentially a sqlite db) then saved the blobs for each image out to a file.

Charting lib open or commerical

Anyone have advice on how to get a control to do something like this
http://screencast.com/t/VyHdxOdRJQwY
I will be plotting based on city or zip so i need to maintain some geo aspects but in the end the chart control needs to look like this guy.
Ideally no flash... but interested to see if anyone has hit something like this.
open or commercial source, im game
d3 seems to be a pretty good library for data visualization.
Check out the examples here: https://github.com/mbostock/d3/wiki/Gallery
Here's an implementation similar to what you are looking for. http://trends.truliablog.com/vis/metro-movers/
I suggest you check out the Google Maps API. There are two versions of the API:
Static Maps API V2 - from the docs:
The Google Static Maps API lets you embed a Google Maps image on your
web page without requiring JavaScript or any dynamic page loading. The
Google Static Map service creates your map based on URL parameters
sent through a standard HTTP request and returns the map as an image
you can display on your web page.
There are Usage Limits: The free version has a query limit of 1000 unique (different) image requests per viewer per day, if that will work for your situation. There is a licensed option above that with associated licensing fees.
Google Maps JavaScript API v3 - from the docs:
The Google Maps Javascript API lets you embed Google Maps in your own
web pages. Version 3 of this API is especially designed to be faster
and more applicable to mobile devices, as well as traditional desktop
browser applications. The API provides a number of utilities for
manipulating maps (just like on the http://maps.google.com web page)
and adding content to the map through a variety of services, allowing
you to create robust maps applications on your website.
There are similar usage limits for this version, also with a licensed option above the free version.
The API could easily create a map to match the one at your link. These aren't an exact match, but here are some examples from the Google Maps Demo Gallery:
We ended up using http://www.mapdotnet.com/ with background from open maps. Custom middle cache tiles from shape files stored in SQL, on top we have open street layer (or can use bing)

Categories