My Account     Contact Us     Cart

Articles

Styling a MAPublisher Scale Bar

After generating a scale bar, it is placed in a MAP Legend layer. You can accept the default look of it, but majority of users will want to customize and style it to match their map.

Now I’ve just generated a simple scale bar. If you expand the Legend layer, you can see the object “MAPublisher Scalebar” is placed within it. This is a special object generated by MAPublisher and there is currently a dynamic link between the MAP View information (i.e. spatial information) and the scale bar object.

Generated Scale bar in the MAP Legend layer

In order to make a custom scale bar, you will have to break the dynamic link between MAPublisher and the scale bar object. In your own workflow, it’s important that you setup the scale before breaking the link because it will not rescale dynamically after the link is broken. Break the link by expanding the generated object.

From the main menu, choose Object > Expand.

From Adobe Illustrator Menu, Object > Expand

In the Expand dialog box, click the “Object” check box, then click OK.

Expand diaog window

The result: the object <MAPublisher Scalebar> is replaced by an object called <Group> in the Layers panel. The connection between the scale bar object and MAPublisher is removed. The art in the scale bar object simply became grouped objects.

Expanded Scale Bar Object

At this point, select objects in the group and change its colors and lines by using the direct selection tool Adobe Direct Selection tool. The direct selection tool allows you to select individual object even if select objects is a part of a <Group> object.

If you are more comfortable with the selection tool Adobe Illustrator Selection Tool, you will want to read the suggestion below. It works, too.

Take a look at the Layers panel again more closely. The screen capture of the Legend layer above shows that there is a <Group> object under the “Legend” layer. When the object tree under the “Legend” layer is expanded, you can see another <Group> object nested within a <Group> object. (a <Group> object containing a <Group> object). Since all the objects are still grouped, you can simply “ungroup” the art.

Expanded scale bar in the Layers panel

Select the <Group> object (i.e. the scale bar object for this example), then from the main menu, choose Object > Ungroup.

Adobe Illustrator menu: Ungroup

When you ungroup the object once, you now see only one <Group>. This <Group> object contains all the text, lines, and area objects composing a scale bar object.

Ungroup Once

Now, ungroup the object once more. Finally you do not see the object <Group> anymore under the “Legend” layer. It indicates that every object in the layer can now be selected individually using the direct selection tool.

After the grouped object is ungrouped twice ....

Select the objects to edit and style them using Adobe Illustrator tools!

At the end ... now ready to be customized

Geographic Imager: Create shaded relief from a DEM

With Geographic Imager 3.x, you can import DEM files to Adobe Photoshop and can create shaded relief images.

step 12: Shaded relief image completed

There are two methods to achieve this:

Method 1: Run the pre-made JavaScript and apply it to all images

After opening your DEM image, choose File > Scripts > Browse… and select Shaded Relief.jsx from the SampleScripts folder inside the Geographic Imager Tutorial folder. It will generate the shaded relief image for the opened DEM image based on the settings in the JavaScript file.

 

Method 2: Create shaded relief images manually

We’ll use the DEM file Rocky Mountains.dem available in the Geographic Imager Tutorial folder for this demonstration.

1) Open the Rocky Mountains.dem image from the Geographic Imager tutorial folder. Geographic Imager automatically detects it as a DEM file and provides the option to select the DEM image import method. For this demonstration, choose Auto-Stretched from the Select Schema drop-down list.

Step 1: Import DEM file option

The imported DEM is opened in black and white. Take a look at the header of the image (or tab of the image file). Notice that it displays “Gray/16”. This indicates that the image is in the 16 Bits/Channel Grayscale mode.

step 1: Imported DEM image

2) Now, change the image mode from 16 Bits/Channel Grayscale to 8 Bits/Channel RGB. From the top menu bar, choose Image > Mode and then 8 Bits/Channel. Once again, go to Image > Mode, this time choose RGB Color.

step 2: Changing the color mode

Once completed, take a look at the image header again (or file tab). Now “RGB/8” is indicated in the header, meaning that the image is now in the 8 Bits/Channel RGB color mode.

step 2: Color mode changed

3) Select the entire canvas (use the Rectangular Marquee Tool) and copy the selected area to the clipboard (Edit > Copy).

step 3: Select the entire canvas

4) Open the Channels panel (Window > Channels) and add one Alpha channel by clicking the Create new channel button at the bottom of the panel or go to the panel option menu and choose New Channel. Leave the channel name as “Alpha 1”.

step 4: create a new channel

5) Select the “Alpha 1” in the Channels panel and fill it in white using the Paint Bucket Tool.

step 5: Filling Alpha channel

6) In step 3 we copied the selected area (the entire canvas) to the clipboard, now we’re going to paste it to the new channel. Select “Alpha 1” in the Channels panel, and paste it (Edit > Paste). You can see that the same image is displayed for all the channels when the copied area is successfully pasted. Make the Alpha 1 channel invisible and make sure the RGB channels are visible.

step 6: pasted canvas

7) Deselect the area (Select > Deselect from the top menu bar).

step 7: deselected area

8) In the Layers panel (Window > Layers), create a new layer named Bump map. Change the Blending mode to Overlay. step 8: New Layer "Bump map"

9) Using the Paint Bucket Tool again, fill the new “Bump map” layer with white.

step 9: fill white

10) From the menu bar, choose Filter > Render > Lighting Effects…

step 10: Menu Filter > REnder > Lighting Effects ...

11) Adjust the settings in the Lighting Effects dialog window.

step 11: adjusting the light effect

12) The shaded relief image is completed! You can use this image to overlay with other georeferenced images with Geographic Imager or with vector datasets with MAPublisher.

step 12: Shaded relief image completed

Creating HTML callouts for MAP Web Author

MAP Web Author, a feature of Avenza MAPublisher for Adobe Illustrator is a versatile tool offering access to map attributes for HTML as well as Flash.

The above map was made with Toronto Transit Commission data freely distributed by the city of Toronto. I purposely made this map long and narrow to reveal a potential issue that can arise when presenting a lot of attribute data in map callouts. As you hover over the red points representing transit stops, you will notice the callout bubble with attribute information for each stop. As you hover around the centre of the map, you will notice that callouts popping up above the half way point of the map have their titles truncated, and those below will sometimes not show the callout’s final line.

This is due to the fact that callouts, as generated by the MAP Web Author API can only be seen over the extents of the flash map. One can set the flash map to be bigger than needed to allow callouts to fully display, but this will complicate panning and zooming functions.

Instead, what we can do is create HTML callouts whose placement are not limited to the extents of the flash map. These HTML callouts can be populated with attributes from the exported flash map. HTML callouts offer a further advantage with respect to image placement. Flash callouts only support HTML version 1.0, which has very limited image placement functionality.

Let’s look at some of the code behind this map. The “popup” div is one of two div objects in the code, the other being the “map” div. The appearance properties of the popup div are set with CSS as follows:

#popup {
	position:absolute;
	top: 100px;
	left: 100px;
	width: 300px;
	height: 125px;
	background: #00ccff;
	padding:2px 2px 2px 2px;
	visibility:hidden;
}

A javascript listener is added to the mouse move event for the map div. When the mouse is over-top a map feature the function shows the popup div, moves it next to the mouse and updates its attribute values. When the mouse is not over a feature, the function hides the popup div.

function onMouseMove (event) {
	var f = theMap.retrieve(AVENZA.FEATURE);
	if (f.attributes) {
		$("#popup").css("top", event.pageY+20);
		$("#popup").css("left", event.pageX+20);
		$("#popup").css("visibility", "visible");

		$("#name").html(f.attributes.name);		
		$("#stopid").html(f.attributes.stopid);
		$("#accesible").html(f.attributes.accessible);
		$("#Latitude").html(f.attributes.latitude);
		$("#Longitude").html(f.attributes.longitude);
		$("#sundayonly").html(f.attributes.sundayonly);
		$("#trapezeid").html(f.attributes.trapezeid);	
	}
	else {
		$("#popup").css("visibility", "hidden");
	}
}

The jQuery AJAX library is used to update the CSS and HTML of the popup div.

Source code for the HTML callout map can be found here. To adapt this code for your own uses update paths and attribute names to match your own web map.

Privacy Preference Center

Close your account?

Your account will be closed and all data will be permanently deleted and cannot be recovered. Are you sure?