Mapbox GL w/ geojson - multiple icons for single location - geojson

I'm creating a web app of publicly accessible water locations throughout our city. This would include water fountains, water bottle filling stations, pools, etc (we'll call these 'access types').
I've got it all in a database, using PHP to generate the GeoJSON, which works as it should (meaning, I can call it and display information via Mapbox GL).
I'm stuck on how to handle displaying/filtering layers/markers/icons though. I have followed Mapbox's 'store locator' and 'filter' tutorials, which I've made work at a basic level, but these all seem to operate under the assumption that each location can/should only be of one 'access type', and shows multiples of each address when there is more than one (stacking icons and displaying a huge list of repeated addresses).
Should I be grouping with my db query, creating a sub-array (object) containing different access types (referred to as 'icon' below), or pull everything individually (see below), and sort it w/ javascript/jquery?
{"type":"FeatureCollection",
"features":[{
"id":19,"type":"Feature","geometry":{
"type":"Point","coordinates":[-83.053604,42.307877]},
"properties":{"name":"Adie Knox Herman Arena","address":"1551 Wyandotte St W, Windsor, ON N9B 1H6","icon":"Water Fountain"}},{"id":19,"type":"Feature","geometry":{
"type":"Point","coordinates":[-83.053604,42.307877]},
"properties":{"name":"Adie Knox Herman Arena","address":"1551 Wyandotte St W, Windsor, ON N9B 1H6","icon":"Water Bottle Filling Station"}},{"id":65,"type":"Feature","geometry":{
"type":"Point","coordinates":[-82.976415,42.314787]},
"properties":{"name":"Atlas Tube Centre","address":"447 Renaud Line Road, Maidstone, ON N0R 1K0","icon":"Water Fountain"}},{"id":9,"type":"Feature","geometry":{
"type":"Point","coordinates":[-82.757893,42.283526]},
"properties":{"name":"Atlas Tube Centre","address":"447 Renaud Line Road, Maidstone, ON N0R 1K0","icon":"Water Bottle Filling Station"}}]}
Any help is greatly appreciated!

Related

Create custom Map for Highmaps using Shapefiles and QGIS

I try to create a custom Map with Highcharts – I need german job center districts. I've done it the way it is described here.
I imported the shapefiles to QGIS an created a highcharts map here. But on this way, all information like the name oft he district got lost. Is there a way to keep it? Because there are a lot of districts – I don't want to write all single names by my own.
I was able to generate GeoJSON from the provided shapefile (the one that you provided me with via email) and place it in the JSFiddle boilerplate (http://jsfiddle.net/highcharts/xbzxfx2L/). Empty map displayed without any problems. To add values to the regions and also to display data labels you need to add adequate data and link it to the mapData (more about it in the API link below). I have prepared an example for you. Simply, copy the content of created GeoJSON (generated from the shapefile using QGIS, as described here: https://www.highcharts.com/docs/maps/custom-geojson-maps) to the textarea and click run button. The map with the values should show up. Also, you could try to use map of Germany from our maps collection. It can be found here: http://code.highcharts.com/mapdata/.
API Reference:
https://api.highcharts.com/highmaps/series.map.joinBy
Example:
http://jsfiddle.net/w20e8vja/

How to integrate latitude/longitude into a dataset and display it on map

I am new with CKAN but I got some experience and I can add some customized fields into a dataset.
We are going to use a dataset to record either publication but some measurements as well. A resource will be some file of measurements.
We want to be able to geolocate the place where measurements have been made.
It's the reason why I installed ckanext-geospacial.
The goal is to be able to have aditional field in a dataset or resource to save, at least, latitude, longitude, altitude.
We also would like to have a map (as google map or something else...), with a marker of the measurement place.
First, I am not sure if I choose the right ckan extension. Does ckanext-spatial will help me?
In any case, I would appreciate your help
to choose the best extension for my need
to setup ckanext-spatial.
I installed ckanext-spatial and I got the following warming messages, while I test the installation:
user#pc:/usr/lib/ckan/default/src/ckanext-spatial$ sudo -u postgres psql -d ckan_default -c "SELECT postgis_full_version()"
NOTICE: Function postgis_gdal_version() not found. Is raster support enabled and rtpostgis.sql installed?
NOTICE: Function postgis_topology_scripts_installed() not found. Is topology support enabled and topology.sql installed?
NOTICE: Function postgis_raster_scripts_installed() not found. Is raster support enabled and rtpostgis.sql installed?
NOTICE: Function postgis_raster_lib_version() not found. Is raster support enabled and rtpostgis.sql installed?
What should I do?
Second question; how can I use the ckanext-spatial within a dataset? How can I use it to display location?
In order to view geolocalized data as markers on a map you just need the Data Explorer plugin, which includes a Map View (I think CKAN's installation already includes this plugin).
As a prerequisite for the Data Explorer plugin to work, you also need the DataStore extension, which saves the rows of the .csv resources as records in a database, such allowing more efficient access to the data.
Once you have the data in the DataStore and the DataExplorer's recline_view added to the ckan.plugins line in CKAN's configuration file, you will be able to use the Map View to select the fields storing the latitude and longitude values and see the markers on the map (if your resources have two fields named latitude and longitude, or lat and lon, they will be automatically detected and used as coordinates).
If I understand correctly, the ckanext-spatial plugins provides spatial queries, so if you just want a map with markers you don't need it.

OpenLayers 3 BBOX strategy

Given this example http://openlayers.org/en/v3.0.0/examples/vector-wfs.js and using BBOX strategy , does it mean it is necessary to use &bbox=' + extent.join(',') part in source URL?
The OpenLayers3 Strategy BBOX strategy says “request new features
whenever the map bounds are outside the bounds of the previously
requested set of features.”
Yes, the &bbox=' + extent.join(',') if required. If you take it out, you will get no wfs features at all. The example is actually somewhat misleading, in that, it calls it a BBOX strategy, whereas in fact it is a createTile strategy, using the BBOX from each underlying tile, as the wfs BBOX. If you look internally at the source code for ol.source.ServerVector you will find a function loadFeatures that calls ol.loadingstrategy.createTile from ol.loadingstrategy which returns the required extents for each tile, which is then used for each wfs call. That is the extent that you see in the extent.join above.
Or to look at it another way, for every call to get an imagery tile, there is a corresponding call to a wfs tile -- which you can verify by looking in the network tab of your browser's dev tools. So, really, this is a tile BBOX strategy, not a view BBOX strategy.
I thoroughly recommend getting local debugging working for OL3 to understand what is going on. You can do that either by loading ol-debug.js, for a non-compressed version of the js, or by setting up a local server, see these instructions

Save data from api request to a model (JSON)

Ok, so over the last week or so I have been getting to grips with making api calls and then having the response returned as JSON and then outputting the parts I want to my view (getting there i think, albeit slowly). The next part of my learning curve is to take this data and save it to a model so that i can use it elsewhere in my app.
What i want to achieve is after the api request has been made and the results are displayed I want to click a button that will then post the data to my model
In this example I am getting data for books via its ISBN number from the itunes api
here is an example of the data returned
{
"resultCount":1,
"results": [
{"kind":"ebook", "artistId":545975179, "artistName":"Gareth Halfacree", "price":9.99,
"description":"<p><b>Make the most out of the world’s first truly compact computer<\/b><\/p><p>It's the size of a credit card, it can be charged like a smartphone, it runs on open-source Linux, and it holds the promise of bringing programming and playing to millions at low cost. And now you can learn how to use this amazing computer from its co-creator, Eben Upton, in <i>Raspberry Pi User Guide<\/i>. Cowritten with Gareth Halfacree, this guide gets you up and running on Raspberry Pi, whether you're an educator, hacker, hobbyist, or kid. Learn how to connect your Pi to other hardware, install software, write basic programs, and set it up to run robots, multimedia centers, and more.<\/p><ul><li>Gets you up and running on Raspberry Pi, a high-tech computer the size of a credit card <\/li><li>Helps educators teach students how to program <\/li><li>Covers connecting Raspberry Pi to other hardware, such as monitors and keyboards, how to install software, and how to configure Raspberry Pi <\/li><li>Shows you how to set up Raspberry Pi as a simple productivity computer, write basic programs in Python, connect to servos and sensors, and drive a robot or multimedia center <\/li><\/ul><p>Adults, kids, and devoted hardware hackers, now that you've got a Raspberry Pi, get the very most out of it with <i>Raspberry Pi User Guide<\/i>.<\/p>", "genreIds":["10017", "38", "9027"], "releaseDate":"2012-08-30T07:00:00Z", "currency":"USD", "genres":["Computers", "Books", "Computers & Internet"], "trackId":559783692, "trackName":"Raspberry Pi User Guide", "artistIds":[545975179], "artworkUrl60":"http://a2.mzstatic.com/us/r30/Publication/v4/ba/a8/2c/baa82ce0-2ac7-7026-04da-6f74bc97b403/9781118464496.60x60-50.jpg", "artistViewUrl":"https://itunes.apple.com/us/artist/gareth-halfacree/id545975179?mt=11&uo=4", "trackCensoredName":"Raspberry Pi User Guide", "formattedPrice":"$9.99", "artworkUrl100":"http://a4.mzstatic.com/us/r30/Publication/v4/ba/a8/2c/baa82ce0-2ac7-7026-04da-6f74bc97b403/9781118464496.100x100-75.jpg", "trackViewUrl":"https://itunes.apple.com/us/book/raspberry-pi-user-guide/id559783692?mt=11&uo=4", "averageUserRating":2.5, "userRatingCount":5}]
}
I would like to save the artistName, Description, an image (would i need paperclip for this?) and the trackName
Can anyone offer some advice on how i go about this, obviously I create a model and setup the table columns (I understand that the column names can be anything?) but after this Im a little lost
If anyone could proviede an Example that would be great as I could then follow the process and understand what is going on
Any help appreciated
One option would be to create a before_filter on your controller, you can list the controller actions that you want it performed for, ie. your API calls.
Within the method called from the before filter you can save the details of the request to a model. This would avoid the need for manually saving the information.
The image based on your example response has a URL to the image so you could just save that to your model assuming you are confident the image URL will not change. Should you want to save the image itself, yes I would recommend something like paperclip or carrierwave.
If you don't want to do it this way then an alternative, and in my opinion less tidy way would be to post the JSON back with a button to a controller action that does what I mentioned above.
EDIT: So to save to you model, for example called ApiCall you could create a new db entry each time your controller action is hit. Say your controller action is called get_info and it is passed the params that enables you to build the JSON response that you have described. You could do something like below.
json_response = JSON.parse(your_response_object)
ApiCall.create(:artist_name => json_response["results"]["artistName"])
You could obviously include any/all the information you had. Alternatively you could store the whole response as a YAML string in one db attribute and parse the information when retrieving it, up to you.
yaml = your_response_object.to_yaml
ApiCall.create(:payload => yaml)

URL for multiple markers in Google Maps

In a desktop Qt application, I have some GPS coordinates that I'd like to show on a map. My plan is to construct an URL with the coordinates and let a web browser and Google maps or a similar service do the heavy lifting.
After reading some apparently reverse-engineered documentation at
mapki.com slash wiki slash Google_Map_Parameters
I can make it work for a single point, but what's the URL syntax for multiple points?
My best shot so far is to build a string such as this:
http://maps.google.com/?ie=UTF8&q=My+First+Point#59.591,17.82&q=My+Second+Point#59.592,17.82
but that will only show "My Second Point". Is there a better description of the syntax somewhere?
Replacing q= with markers= did not work and the "static map" suggestion below only complained about an incorrect API key.
for google maps static there is this URL:
http://maps.google.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap
&markers=color:blue|label:S|40.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318
&markers=color:red|label:C|40.718217,-73.998284&sensor=false&key=MAPS_API_KEY
Detailed version:
http://maps.google.com/maps/api/staticmap?
center=Brooklyn+Bridge,New+York,NY
&zoom=14
&size=512x512
&maptype=roadmap
&markers=color:blue|label:S|40.702147,-74.015794
&markers=color:green|label:G|40.711614,-74.012318
&markers=color:red|label:C|40.718217,-73.998284
&sensor=false
&key=MAPS_API_KEY
i am not sure if this syntax is also good for standard maps
http://staticmapmaker.com/ - very nice web tool for generating static map urls.
List of currently supported map services:
- Google
- Bing
- Yandex
- HERE
- Mapbox
- MapQuest
- CartoDB
p.s. I know this is an old question, but many still google for it.
Throwing parameters at maps.google.com only gets you one point.
As dusoft says, you could use Google Static maps.
Or, if you require dynamic maps, you could write your own public web page that uses Google Maps API and accepts a long list of parameters. Use your own web page in exactly the same way that you were intending to use maps.google.com web page, except that you get to design what you want the parameters to look like.
Perhaps something like this.
Several parameters (such as the markers and path parameters) take multiple locations. In those cases, the locations are separated by the pipe (|) character.
https://maps.googleapis.com/maps/api/staticmap?center=boca+raton,+fl+|+deerfied,+FL&zoom=12&scale=false&size=600x300&maptype=roadmap&sensor=false&key=API_KEY&format=png&visual_refresh=true&markers=size:mid%7Ccolor:red%7Cboca+raton,+fl+|+deerfied,+FL" alt="Google Map of boca raton, fl | deerfied, FL
I know that you specifically asked for Google Maps, however I came up with a solution using Bing Maps:
https://bing.com/maps/default.aspx?sp=point.48.858303_2.3499404_Eiffel%20Tower~point.48.8530067_2.3499404_Notre-Dame%20Cathedral~point.48.8605088_2.3376727_Louvre link
The sp parameter can define a list of points, polylines, polygons and addresses. Multiple objects are separated by ~.
The syntax for point is:
point.latitude_longitude_titleString_notesString_linkURL_photoURL
titleString is displayed in the map and notesString only when clicking on a point.
A Link with you coordinates would look like:
https://bing.com/maps/default.aspx?sp=point.59.591_17.82_P1~point.59.592_17.82_P2 link
I did some tests on how many of these points can be in a URL by generating a really long URL in the form of https://www.bing.com/maps?sp=point.10.000000_10.000000_0~point.10.000000_10.01_1~point.10.000000_10.02_2~point.10.000000_10.03_3... and it seems up to about 150 points are working.
Documentation:
Microsoft Documentation: Create a Custom Map URL

Resources