Making a Map Without Knowing What the Final Extent or Scale Will Be

BlogOctober 22, 2014

Ever have the problem that you want to make a map and you are waiting on the final extent or scale, but you want to get started adding data and working on the layout? Here are a couple of tips to make your life easier.

1. Move artboards around without moving your data

Geographic features in Adobe Illustrator are generally referenced to a known coordinate system. This coordinate system is mapped to Adobe Illustrator’s “Global Coordinate System” which has its origin at the top-left corner of the first artboard in a document. What this implies is that artboards can be moved around within this reference system in order to show different geographic data on the page. However, by default, moving an artboard moves any art that overlaps it as well. Obviously moving any referenced data around is going to ruin its spatial accuracy so this is something we want to avoid. Luckily there are two ways of doing this.

The first is to select the Artboard tool and click the Move/Copy artwork with artboard button to the right of the artboard name in the control panel above the document window.

With this option turned off, you are free to move the artboard around without disturbing any of the geographic data.

There is one downside to this though: you may have map elements such as titles, legends, grids, masks etc. that you want to stay locked in place on the artboard while you move it around the geographic data. The easiest way to do this is to simply lock any layers that contain geographic features, unlock the map elements, and activate the Move/Copy art with artboard option.

Non-map layers are unlocked while the layer that contains geographic data is locked.

When the artboard is repositioned, your data will stay in the correct geographic location and your map elements will move with the artboard, keeping the same relative position.

Three images showing an artboard moving while the geographic data stays put.

2. Set up a clipping mask in conjunction with a grid

The previous example used a white polygon with a hole in the middle as a mask to provide whitespace around the edge of the map. Another way to achieve this is to use a clipping mask to hide geographic features outside the extent of the mask. This works well by itself, or when combined with a grid or graticule layer.

We have taken the previous example, deleted the mask and adjusted the colour of the background polygons slightly. We have also added an AOI polygon that will serve as the clipping mask extent.

Artboard extents are visible along with some data, a title, a scalebar and the clipping polygon.

To create a clipping mask, the first thing we’ll make a new layer called Clipped. Make sure that it is a non-MAP layer (verify this in the MAP View panel).

The new Clipped layer can be seen in both the Layers panel and the MAP Views panel.

Next, drag both the AOI layer and layers that contain geographic data into the Clipped layer making sure that the AOI rectangle is above the layer holding the geographic features.

The AOI layer and the MAP Layer are added to the Clipped layer.

Now if we select the Clipped layer and click on the Make/Release Clipping Mask button (Second from the left at the bottom of the panel) we should see the AOI rectangle become invisible and the MAP layer is visible within the extent of this path.

The clipping path gets underlined in the Layers panel and the geographic features are clipped to its shape.

We can now add a grid over the top of the clipped area using the Grids & Graticules tool. You will find that the default extent of the grid is the same as the spatial data. You will need to resize the grid to match the clipping mask.

Index/reference grid overlaid on the map.

If you want to change the spatial extent of the map you have to adjust both the clipping polygon and the grid. It would be nice to group them and resize it together, but Adobe Illustrator doesn’t allow groups to span multiple layers. One way around this is to use a saved selection. To do this, select the clipping mask and the MAPublisher Grids, then choose Select | Save Selection. Give the selection a name like Grids and Clipping Mask.

Now if you need to adjust the spatial extent of the map you can quickly choose the saved selection and resize the clipping mask and grid or move them both around the artboard simultaneously.

The saved selection can be applied by clicking the Apply as New Selection button on the left.

Map grid and clipping mask have been enlarged together. The scale has also been made smaller.

Defining the Projection or Projecting the Data?

BlogMay 15, 2014

Have you ever imported data that doesn’t quite line up how you’d expect? It may be that you’ve fallen victim to a common workflow error when importing GIS data. Some file types such as CSV can be used for GIS data but don’t contain coordinate system information. When you are importing data from this format, you first have to define the correct coordinate system.

In this example, we’re going to look at the common mistakes people make and how to avoid them. We’ll start with a world map in the Robinson projection.

We have a CSV file containing points for large cities that we’d like to add to the map. We know from our data source that the CSV uses the WGS84 coordinate system. After selecting the file for import, the MAPublisher Import dialog box helpfully notifies us that some required settings are missing. We’ll click the blue ‘Required settings are missing’ link to continue.

Setting up the import, the coordinate column settings are easy since we have an X_COLUMN and a Y_COLUMN, but we can’t forget to check that the format is correct. The default is Projected units, but we know the file uses WGS84, and can tell by the numbers in the column that the coordinates are in decimal degrees, so we’ll change the format to reflect this information and click OK.

Back at the import window, we see the message ‘Data loaded successfully’. Great! Let’s click OK and add the large cities to the map.

The data has been imported but the result isn’t what we expected. The new layer has been added to a new MAP View, so let’s try dragging it into the Robinson MAP View with the world map.

We get a prompt saying that there isn’t any coordinate system information. We want it to be in Robinson like the rest of the map so we’re going to leave the default setting of Same as: Robinson.

The data has moved, but it still doesn’t look like we were expecting. Where did we go wrong here?

There are actually two places in the workflow where we could have avoided this common mistake. When we dragged the point layer into the Robinson MAP View, the pop-up dialog box prompted that a coordinate system wasn’t specified. We specified Same as: Robinson, thinking this was the correct choice, but we had already determined during import that the CSV was in WGS84. What we should have done here was to specify the coordinate system as WGS84.

The other place where we could have avoided this error was right after setting up the CSV file for import. In MAPublisher 9.4, there’s a new button on the Import dialog box that allows you to see more detailed information about files being imported. By clicking the Advanced button in the Import dialog box, we would have noticed that there was no coordinate system specified.

Even here, it might have been tempting to choose Same as: Robinson to add it to the Robinson MAP View, but this would import the points exactly the same as before – all in one location in the middle of the map. Instead, what we want to do is click the blue ‘No Coordinate System Specified’ link and choose WGS84. After this is set up, we’ll click OK to add the data to the map.

The data still isn’t quite right – it looks the same as when we first imported it. But again we notice that it has been imported into a new MAP View, so we’re going to drag the layer into the Robinson MAP View and see what happens.

Perfect! By assigning the correct coordinate system to the data during import, the points have been imported correctly!

Mistakes during data import are common amongst GIS users, especially those who are just starting out. In the first scenario, when we imported the CSV and added the data directly to the Robinson MAP View, we thought we were telling MAPublisher that we’d like it to match up with the map. What we really did was tell MAPublisher that the data was already in the Robinson projection, even though we knew it was in WGS84. What we should have done first was to define the projection by telling MAPublisher what coordinate system the data is already using. Once MAPublisher knows what system the data is starting in, we can then ask it to project or transform the data into the coordinate system that we’d like to use.

When working with data that doesn’t have coordinate systems already defined, it is very important to follow the workflow in the correct order to avoid frustration when the data doesn’t line up as expected. Always check your sources when using data that isn’t defined, and make sure you’re assigning the correct coordinate system before performing any transformations or projections.

New Image Data Type Available in MAPublisher

BlogMay 12, 2014

Do you have pictures and images you want to insert as an attribute in MAPublisher?

MAPublisher 9.4 introduces a new data type called Image. To work with the Image data type, you’ll have to take a look in the MAP Attributes panel. The Image data type can be used in the same way as the other data types in the MAP Attributes panel. Use the Edit Schema dialog box to edit or create the Image data type as an attribute.

For this example, we have a point layer called “Point of Interests”. Let’s create a new attribute column with Image data type called “Picture”.

We added a fourth attribute to this point layer (existing attributes were PlaceName, Note, and PhoneNumber).

Let’s insert an image into the attribute cell. Click the “No image…” hyperlink in the attribute cell. It will open the Edit Picture dialog box. Click to browse for an image to add to the attribute cell. Once the image is added, a preview of the image will be visible in the Edit Picture dialog box.

There are other controls in this dialog box.

	Select and insert an image to the attribute cell. Use this button to replace the existing image to something else. You can insert jpg or png file.
	Export image as jpg or png
	Remove image from the attribute cell
	Navigation control – zoom to fit
	Navigation control – zoom to actual size
	Navigation control – zoom in
	Navigation control – zoom out
Change the name of the image

After clicking OK, the image will be listed in the attribute cell. The cell shows the file name of the image (it will be the file name of the image by default but you can change the name of the image to anything else). Also, hovering the mouse pointer over the image name in the attribute cell will show a quick preview of it.

The Image attribute type also supports images exported from PDF Maps (in KML format) and images exported to Google (in KML format).

What is the difference between Grid Bounds vs Grid Constraints?

BlogMay 7, 2014

In MAPublisher, the grid bound is the visual extent of the grid or graticule. The grid constraint is the geographic extent of the grid or graticule. It may be a little confusing since both grid bound and grid constraint are defined by coordinate values. In terms of hierarchy, think of the grid bound as the overall container of the grid and the constraint as being contained within the bound.

These examples may help you better understand it.

1. In this example, the grid bounds are specified as the lower-left and upper-right of the artboard corners. Notice that the graticule extends all the way to the edge of the artboard (as specified). This is a very typical way to use a grid or graticule.

2. Here, the grid bounds are still the lower-left and upper-right of the artboard. The grid constraint is based on the minimum and maximum longitude and latitude values of the specified MAP Locations. Notice that the rectangular black border of the grid bound is at the edge of the artboard. This is also a common way to use a grid or graticule, especially for larger scale maps.

3. In this example, the grid constraints were disabled and, instead, the two MAP Locations are used to define the grid bounds. Notice that the rectangular black border of the grid bound is defined by two MAP Locations.

4. When both grid bound and grid constraint are set to the same coordinates (in this case, MAP Locations) you can see the result here. The grid bounds are clipping the grid constraints. This would not be an ideal situation to use grid constraints, but it is definitely possible to use it in this fashion.

MAPublisher Grids & Graticules are highly customizable and we’ll be blogging more about its features.

Data Collection: Getting Elevation Information with MAPublisher

BlogFebruary 18, 2014

Have you ever had a point dataset where you wanted to obtain the elevation information for every point?

Instead of looking up another dataset to join elevation values or worse, looking them up by hand, MAPublisher 9.3 introduced a new feature to determine the elevation value for every point in a MAP Point layer using the “Add Calculate Data” tool. . This is based on using a GeoName account (more on this below).

To use it, simply have a MAP Point layer imported to the artboard and open the Add Calculate Data dialog box. In this example, we’re trying to gather elevation points for mountains in Japan. In the Calculation drop-down list, choose Elevation. You can choose the units for the elevation value from the drop-down list. For this example, we are choosing “meter”. If you do not have the GeoName account yet, click the hyperlink and obtain one (for free). After you’ve registered for a GeoName account, enter your username and click “OK”.

A new column “Elev_metre” is populated as specified in the Add Calculated Data dialog window and every point has the elevation information in meters.

This is a handy tool that may help when you have point data along hiking trails, ski courses, waypoints collected with PDF Maps (etc.) or when you need to find elevation data for any type of points.

If you use this feature, please send us your feedback and tell us how you like it!

Split Layer using Unique Values in Attribute in MAPublisher

BlogOctober 18, 2013

Do you have some data you would like to divide into multiple layers using unique values in an attribute? If so, you might want to try using the Split Layer feature in MAPublisher.

For example, we have a MAP Layer of the world (world_area layer). The world_area layer has many attributes and one of the attributes is about “Continent” information. With the “Continent” attribute, there are eight unique values: 1) Africa, 2) Antarctica, 3) Asia, 4) Australia, 5) Europe, 6) North America, 7) Oceania, and 8) South America.

To split this world_area layer into eight different layers based on unique values in the “Continent” attribute, we simply specify the Continent layer in the Split Layer dialog box.

Open the Split Layer dialog box. Choose the world_area source layer, then select the option “Split art to new layer(s) by unique attribute value:”. If you have a specific word you would like to include with the eight layers, enter the value for the “New layer prefix” option. Here, we entered the word “continent” as the prefix.

Now you have eight new MAP layers created based on the unique values of the “Continent” attribute. The attribute scheme, structure, and attribute values are inherited from the source layer to the split layers.

Creating Grids in MAPublisher with an Alternative Coordinate System

BlogOctober 11, 2013

In a previous blog about Grids and Graticules, we quickly introduced one of the major features of the new Grid and Graticule tool. We’d like to share another major feature when creating grids: creating grids with an alternative coordinate system.

For example, the MAP View has a coordinate system “NAD 83 / UTM zone 17N” (in metres). You might want to make grid lines with the same coordinate system but in different units. You can do so by creating a custom coordinate system and then specifying the desired unit (US Foot, for this example), then creating a grid based on custom coordinate system. In this example, a grid with NAD83/UTM zone 17N (metres) coordinate system is created in the blue colour. Another grid with a NAD83/UTM zone 17N (USFoot) custom coordinate system is created with the orange colour.

Likewise, you can create multiple sets of measured grids with different coordinate systems in one MAP View (e.g. one set with NAD83 UTM, another with NAD27 UTM, another with some other local coordinate system) without the need to transform the MAP View.

MAP Attribute Panel: Attribute Tear-Off Panel (CS6 or higher versions only)

BlogOctober 2, 2013

A little known (but very useful) feature is the Attribute Tear-Off Panel which is located in the upper-right corner of the MAP Attribute panel (available in MAPublisher that’s compatible with Adobe Illustrator CS6 or higher). Use it to help you edit and view attributes even when they are deselected. It is very handy when used to compare attributes of different datasets.

Simply click the Attribute Tear-Off Panel icon to open another MAP Attribute panel. There are a few key difference between MAP Attribute panel and Tear-off panel:

1) The tear-off panel does not have any MAP Attribute functions (e.g. Join Tables, Find and Replace, Edit Schema, etc).

2) The tear-off panel view remains active and shows attributes even after features are deselected.

If your data values are updated within MAP Attribute panel, click the Attribute Tear-Off Panel again to update the values in the tear-off panel.

Labeling Trick for MAPublisher

BlogApril 1, 2013

This blog post was written by Avenza reseller in The Netherlands, Hans van der Maarel of Red Geographics.

When you’re labeling point features (let’s say cities) in MAPublisher, using either Label Pro or Label Features, and you’re not placing a label for every single point, you’re left with the task of removing the points you haven’t labeled. This trick will have the text inherit the attribute structure of the points including a lat/long and guarantee that there are no orphan points.

Take for example the above map. I want to label the cities, but not all of them. I’ll decide as I go along which city will get labeled, and which will get dropped. In order to more easily remove the unlabeled cities I need to do some preparation. I’ll create two columns in the cities layer, X and Y, and assign the expression #MapX and #MapY to them, respectively. It’s important that you do this through the Apply Expression option in the Map Attribute panel.

This gives two attributes with the original coordinates of the city points.

Next, I’ll create a layer for the labels and put it into the MAP View as a text layer, indicating that I want to copy the attribute structure of the cities layer.

Now that all the preparatory work is done, I’ll start the labeling. I’m going to be using the Label Features option, but this will work with MAP LabelPro as well.

If I select one of the texts and look at its attributes, I’ll see that the attributes from the city point have been transferred to the text, including the X and Y attributes which hold the position of the original city point.

Next, I’ll remove the city points layer, select all city labels and use the Export Attributes option in the MAP Attributes panel:

This will export a comma-delimited text file (CSV). Make sure to check the “Field names on first line” option. It’s not exactly necessary, but it will make things a lot easier.

Import the CSV file back into MAPublisher. Make sure to specify that the projection of the data is the same as the existing MAP View. Once the data is imported, you can apply any existing Stylesheets that you had in place to style the cities, or create a new one. This way, you end up with just the symbols for the cities you’ve actually labeled.

Create HTML5 Maps with MAP Web Author in Adobe Illustrator and How to Embed Them on your Website

BlogJanuary 10, 2013

What is HTML5?

HTML5 is the current major revision of HTML (Hypertext Markup Language), the core markup language of the Internet. One of its major development goals was to reduce the need for proprietary, plug-ins such as Adobe Flash and to provide new graphics drawing abilities to the canvas element of HTML5. Scripting (e.g. JavaScript) is used to draw graphics, animations, and display other types of content. The potential of applications in online mapping with HTML5 technology varies widely including uses in fields such as cartography, GIS, demographics, and statistics.

Introduction to HTML5 Map Web Author

As maps become more detailed and data sources becoming richer, the way we present multiple data layers and map projections in dynamic map zoom levels and extents, traditional web mapping techniques start to become too limited. While many current web maps are rendered and served through a server, this could limit the amount of data provided and be slow to transfer as more and more tiles are served. MAP Web Author uses a technique to make maps from Adobe Illustrator compatible with browsers that support HTML5, specifically the canvas element. The maps exported using MAP Web Author are not server-side rendered, instead, they are rendered on-the-fly and content dynamically changes when the map is panned or the map zoom level is changed. This ultimately produces a more flexible, interactive and dynamic map. An HTML5 map also has more efficient storage and requires less space than other web map technologies. Stored vector map data (points, lines, and areas) is more efficient than raster tiles and can be displayed at any scale and even styled using CSS. Since HTML5 technology replaces browser plug-ins like Flash or Java, web maps generated by MAPublisher are accessible on Android, iOS, and Windows mobile devices (smartphones and tablets).

Files created from export

After exporting your map using MAP Web Author to HTML5 format, several files will be created. A ready to use index.html file and an index_data folder. The index.html file contains pre-formatted code necessary to view your map. In most instances, you can simply open the file in a browser to view the web map.

The index_data folder contains all of the necessary map layer data, JavaScript files, and CSS files to display your map.

How to embed an HTML5 web map into your site

The viewer will be embedded inside of a div element in your page (the “container div”). The map view will fill the container div.

For mobile specific sites we recommend setting the width and height of the container div to 100%, then using max-width and max-height to limit the width to the size of the map. The style should fit in the head, like this:

<style>
	#map_container {
		max-width: 479px; 
		width: 100%;
		max-height: 320px;
		height: 100%;
	}
</style>

For standard websites we recommend explicitly setting a width and height of the container div. The style should fit in the head, like this:

<style>
	#map_container {
		width: 479px; 
		height: 320px;
	}		
</style>

The following script tags must be included in the head tag as well. These scripts contain JavaScript functions that allow the map to function, like so:

<script src="index_data/jquery-1.7.1.min.js"></script>
<script src="index_data/openseadragon-min.js"></script>
<script src="index_data/avenza-viewer.js">lt;/script>

Keep note that the prefixUrl points to the directory where your map data is stored. It should be a relative path to avoid cross-site access errors. The id is used below in the body of your page.

<script>
	var avenzaViewer;
	$(function () {
		
		AVENZA.initialize();
		avenzaViewer = AVENZA.embedViewer({
			id: 'map_container',
			prefixUrl: 'index_data/'
		});
	});
</script>

Within the body tag, place the div element where appropriate. Specifying the div element id initiates the JavaScript to display the HTML5 web map. If a browser that is not compatible is used, then the message is displayed.

<div id="map_container">
	<div style="display:none">
		<!-- 
		The message below will appear instead of the map if 
		a user connects with a browser that does not support 
		enough HTML5 for the map viewer to function. You may 
		wish to customize the message for your site.
		-->
		A web browser that supports HTML5 is required in order 
		to view this content. If you are seeing this message 
		then your current web browser does not. 
 
		Please upgrade.
</div>

More information and sample HTML5 maps can be found in the MAP Web Author section.

Avenza maps makes it easy to interact with offline
maps on your iOS, Android and Windows devices.

Get the app. Get the map.

Archives

Making a Map Without Knowing What the Final Extent or Scale Will Be

1. Move artboards around without moving your data

2. Set up a clipping mask in conjunction with a grid

Defining the Projection or Projecting the Data?

New Image Data Type Available in MAPublisher

What is the difference between Grid Bounds vs Grid Constraints?

Data Collection: Getting Elevation Information with MAPublisher

Split Layer using Unique Values in Attribute in MAPublisher

Creating Grids in MAPublisher with an Alternative Coordinate System

MAP Attribute Panel: Attribute Tear-Off Panel (CS6 or higher versions only)

Labeling Trick for MAPublisher

Create HTML5 Maps with MAP Web Author in Adobe Illustrator and How to Embed Them on your Website

What is HTML5?

Introduction to HTML5 Map Web Author

Files created from export

How to embed an HTML5 web map into your site

News Archive

Avenza maps makes it easy to interact with offlinemaps on your iOS, Android and Windows devices.

Get the app. Get the map.

1. Move artboards around without moving your data

2. Set up a clipping mask in conjunction with a grid

What is HTML5?

Introduction to HTML5 Map Web Author

Files created from export

How to embed an HTML5 web map into your site

News Archive

Avenza maps makes it easy to interact with offline
maps on your iOS, Android and Windows devices.