CPL's iOS Resources

Tuesday, April 2, 2013

TileMill & MapBox decoded - My First MapBox map

Wednesday, March 27, 2013

Custom mapTiles and Building Maps in MapBox & TileMill

This is a quick mashup of details needed to build a custom map using;

Beautiful artistic map tiles from Stamen Design
Integrated into your own custom map tiles with TileMill
And built out as a completed annotated map with MapBox

This is a simple demo for building a small map of Farmer's Markets to be published in a local omnivore quarterly.

Embed code for Stamen watercolor map;

To use these tiles, just include our JavaScript alongside your favorite mapping library:

<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.1">

</script>

Then, follow the instructions below for your preferred library:

OpenLayers is a hefty and featureful mapping library for use with a variety of GIS applications. View the example.

// replace "toner" here with "terrain" or "toner"
var layer = new OpenLayers.Layer.Stamen("watercolor");
var map = new OpenLayers.Map("element_id");
map.addLayer(layer);

Creating embedded code (iFrames) for custom maps

This is a description including code snippets of how to create embed code for other people to insert into their web pages. It is based on the work we are doing with GPSVisualizer, but can be used to embed an URL that is available to an online server (like our SCNewspaperTaxi website, or a file with a URL on our Google Drive).

This is the FAQ for GPPSVisualizer:

By far the easiest solution is to put the map in an "inline frame" using the <IFRAME> tag. This creates a "window" in your page into which you can load another file (more info about IFRAMEs). The advantage of doing this is that the DIVs and margins and styles and whatnot will be completely isolated from the rest of the structure of your page; also, you don't have to edit the attributes of the <BODY> or <HTML> tags, which you would have to do if you tried to merge the GPS Visualizer code into your Web page. (The only disadvantage, and one which would only affect "power users," is that if you want to create objects that interact with the map -- for instance, a list of waypoints, or a control that will re-center the map -- those cannot be outside the IFRAME.)

Another advantage to IFRAMEs (as opposed to cutting and pasting bits of HTML into your page) is that you can place as many of them on your page as you want; because they are isolated from each other, there shouldn't be any conflicts even if all the maps have identically named parts.

Here's a sample <IFRAME> tag; the anchor in the middle will only be displayed if the browser does not support inline frames:

<a href="my_map.html">Click here for the map</a>

</iframe>

Here’s an example from a Google Maps embed code:

</iframe>

<br /><small>View <a href="https://maps.google.com/maps/ms?msa=0&msid=204112771159932432535.0004d6a3eb52759422f2e&hl=en&ie=UTF8&ll=36.987644,-121.759922&spn=0.271253,0.722587&t=m&iwloc=0004d6a410726c0cee96f&source=embed" style="color:#0000FF;text-align:left">Santa Cruz Beer Map </a> in a larger map</small>

demo map URL saved in SCNewspaperTaxic.com

http://santacruznewspapertaxi.com/wp-content/uploads/2013/03/xxxxDistributionGeocoded04.html

Here’s the code for our 1st iFrame (hopefully):

<a href="http://santacruznewspapertaxi.com/wp-content/uploads/2013/03/xxxxxxDistributionGeocoded04.html">Click here for the map</a>

</iframe>

Creating embedded code (iFrames) for custom maps

Here's a sample <IFRAME> tag; the anchor in the middle will only be displayed if the browser does not support inline frames:

<a href="my_map.html">Click here for the map</a>

</iframe>

Here’s an example from a Google Maps embed code:

</iframe>

demo map URL saved in SCNewspaperTaxic.com

http://santacruznewspapertaxi.com/wp-content/uploads/2013/03/xxxxDistributionGeocoded04.html

Here’s the code for our 1st iFrame (hopefully):

<a href="http://santacruznewspapertaxi.com/wp-content/uploads/2013/03/xxxxxxDistributionGeocoded04.html">Click here for the map</a>

</iframe>

Monday, March 25, 2013

Dynamic Linking of Map & Spreadsheet

The following instructions allows the map generated by GPSVisualizer to be dynamically linked with the spreadsheet that generated the original data. This means that all changes made to the 'control' spreadsheet will automatically appear in the map every time it is reloaded. Very cool, again many thanks to: Adam Schneider.

Accessing the spreadsheet:

The file should be saved as a doc.google.com/spreadsheet and formatted with lat, long and other data as necessary to generate the popups
Open the file, Goto File, Publish to the Web, Start publishing now or Republish now (if the file is already published)
Copy, <ctrl>C the resulting URL for pasting into the GPSVisualizer script

Building the Map:

Next we go to the GPSVisualizer site and goto Make a Google map from a GPS file
Paste <ctrl>V the Spreadsheet URL into the Or a URL that the map will load dynamically box in the lower left corner
Expand the WayPoint Options section and changes as necessary, including;
Icon:
Default color marker:
Synthesize name: {name}
Synthesize description: Contact: {contact}<br>Phone: {phone} generates a custom form in the popup
Press Draw the Map button and cross your fingers
Goto the resulting map and then select the save your Google map link and save the file with an appropriate name & as a simple .HTML file
That file can now be opened in your browser, and ever time you update the spreadsheet, and press Republish now the map file will update with the new data (after you Reload the map page)

It's like Magic!

Or a URL that the map will load dynamically: Os r

a URL that the map will load dynamica

CPL's iOS Resources

Try the search, it's linked to some great forums

Tuesday, April 2, 2013

TileMill & MapBox decoded - My First MapBox map

Wednesday, March 27, 2013

Custom mapTiles and Building Maps in MapBox & TileMill

Creating embedded code (iFrames) for custom maps

Creating embedded code (iFrames) for custom maps

Monday, March 25, 2013

Dynamic Linking of Map & Spreadsheet

Great iOS Linkage

Followers