Use shapefile as a web map? - javascript

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.

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.

OpenLayers 3 - Zoomify - Tiles - Getting started

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.

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.

Dynamically Load Choropleth using JavaScript

I have a database and web server filled with values for particular countries. I want to be able to display an interactive map that is color coded based on the values from my database upon querying it. (By interactive, I mean a simple zoom-in and move-around feature is all that is needed).
I have the shape files (.shp) of the world, and can easily get KML files as well. This all needs to be done in JavaScript/JQuery (using JQuery to grab the data from the database) and then apply a color code scheme to the shape file (fill in the country borders).
What would be a good JavaScript library to use for this? I have looked into OpenLayers but am unsure it can do what I need (perhaps I haven't dug deep enough).
It sounds like Leaflet.js would be another great option for you. Making choropleth maps in Leaflet is very easy and intercity (zooming) is standard.
You might try D3.js, which is a great framework in general, and has some basic Choropleth support, though I'm not sure how well it works natively with your existing files.
Check out:
http://mbostock.github.com/d3/ex/choropleth.html

Categories