Posts Tagged ‘symbol’
Embedding a custom Google mashup
Problem: You need to display GIS data on a webpage on top of a familiar basemap with basic zoom and pan tools.
There are many ways to do this. The one I will explain today doesn’t require programming skills, specially configured servers or proprietary software. Note: I borrowed heavily from Havard University’s Google Maps tutorial for this entry. They have an excellent free web-based GIS Technical Training Workshop Series.
The basic map they provide is all you really need to get started. The HTML file is structured and commented in such a user-friendly way that you will be able to start editing it to make common customizations to your map almost immediately. No need to wade through the Google Maps API Documentation until you’re ready to try something more complicated.
Go to http://maps.cga.harvard.edu/samples/basic.html and save the html source document (basic.html) to your harddrive. Then open it in a text editor.
The first thing you will probably want to change is the area of the world that the map is showing. To do that, change this bit of code, which is right now centered and zoomed to show the United States.
//Sets the initial map location and zoom level (latitude, longitude) in decimal degree format (zoom level) 1 - 21
gmap.setCenter(new GLatLng(39.10960, -96.5), 4);
For my example, I’m going to make a map of the recent Haiti earthquake. There’s been a lot of that going on recently as geo-Pros have been banding together to speed information to the relief workers.
I’ve changed my center coordinates to the location of the main quake, and upped my zoom so Hispaniola island fills the screen:
gmap.setCenter(new GLatLng(18.44, -72.54), 7);
Now, I’m going to change the starting style to make it a little less busy, since I’m going to be adding things. Uncomment the second line in the code here.
//Sets the initial map to load. Change between PHYSICAL, SATELLITE, HYBRID, NORMAL. Default is NORMAL
//gmap.setMapType(G_PHYSICAL_MAP);
When commented out, it will default to NORMAL. If you want to change that, you will need to delete the // in front and change it to one of the options above. Like so:
gmap.setMapType(G_HYBRID_MAP);
Note: PHYSICAL is an attractive terrain map that is not available in standard google maps. It’s tempting to use it, but it’s still too bright for the things I’m going to add next to show up well.
My map is centered on the location of the quake, but I also want to add a pointer to show exactly where it happened. To do that, insert the following code after the line where you changed the background map style.
//Adds a marker with window information
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
var point = new GLatLng(18.44,-72.54);
var marker = createMarker(point,'Magnitude 7.0 Earthquake Jan 12, 2010');
gmap.addOverlay(marker);
//End of add marker code
The editable areas in red are where you can change the coordinates of the marker and the description in the pop-up box.
I will also plot the locations of a couple aftershocks that occurred over a week after the initial event. I got these locations from the USGS Earthquake Search page at http://neic.usgs.gov/neis/epic/epic_circ.html
var point = new GLatLng(18.38,-72.85);
var marker = createMarker(point,'Magnitude 4.9 Aftershock Jan 21, 2010.');
gmap.addOverlay(marker);
var point = new GLatLng(18.48,-72.45);
var marker = createMarker(point,'Magnitude 4.4 Aftershock Jan 22, 2010.');
gmap.addOverlay(marker);
You can continue adding as many points as you like in this fashion.
You will probably want to change your markers so they don’t all look the same. In my case, I would like to distinguish the earthquake from the aftershocks. You can use any of the icons shown on this page, instead of the default marker. To do that, add this code block right before the //Adds a marker with window information block:
//javascript that sets up variables that enable the map to draw a custom icon.
var baseIcon = new GIcon();
baseIcon.iconSize=new GSize(32,32);
baseIcon.shadowSize=new GSize(56,32);
baseIcon.iconAnchor=new GPoint(16,32);
baseIcon.infoWindowAnchor=new GPoint(16,0);
var custom_icon = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal3/icon28.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon28s.png");
//end of custom icon code
Change the red pal group number and icon number to match the icon you want to use. Then, add the blue text to the end of these lines:
//Adds a marker with window information
function createMarker(point,html,icon) {
var marker = new GMarker(point,icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
var point = new GLatLng(18.44,-72.54);
var marker = createMarker(point,'Magnitude 7.0 Earthquake Jan 12, 2010.', custom_icon);
gmap.addOverlay(marker);
Note: if you wanted to use two types of icons, you could define (for example) a custom_icon2 above and assign it below, in the same manner.
It is simple to add KML files, which were developed for use with Google Earth, to these maps. Although shapefile is still the most common format, KML is becoming more and more available. My favorite new data search tool, the Geocommons Finder! offers its entire catalog in KML format (along with SHP and CSV).
To add a KML layer that shows the locations of hospitals in Haiti, you’d insert the following code right before the //Close bracket for the function initialize:
//Adds a kml overlay
var geoXml = new GGeoXml("http://finder.geocommons.com/overlays/20906.kml");
gmap.addOverlay(geoXml);
//End of kml overlay code
You can add as many of these as you like, and change the URL to point to whatever file you’d like. Note: If you, like me, have most of your data in other formats, you can use Havard’s Export to KML: Version 2.4 ArcGIS extension (see list on right side of page) before adding it to a mashup.
Here’s my Haiti map with all the changes I described. View the source to see them in context.
Tags: Google Maps API, javascript, kml, mashup, symbol
Saving symbology to use again
Problem: You have encountered or created some really nice symbols and want to stash them away for future use.
Sometimes it takes forever to get a symbol just right. And sometimes you’re looking at a map or layer file made by someone else and just love what they’ve done. In either case, it is not necessary to repeat the work, because you can save symbology definitions in a couple different ways.
The ESRI Streetmap package comes with a layer file that can be used to produce pretty maps from the data. In particular, I like the orange star symbol they use for state capitals.
In order to save it for re-use, I would follow the steps below. These same steps also can be used to save line symbols, fill symbols (for polygons), and font definitions (for text labels).
Bring up the Layer Properties, Symbology tab, and double click on the symbol to open the Symbol Selector. (For text labels you get to the Symbol Selector by going the Labels tab and pressing the Symbol… button). On the symbol selector screen there is a Save… button. If you press it, it will ask you to give the symbol a name and a category.
That’s really all there is to it! Your saved symbol will now appear at the top of the list of symbol choices. It will be there whenever you open ArcMap from now on, available for use like any other symbol. In addition, if you go to the Category drop down you will be able to see only the symbols in the category you just created. So, for instance, I could save all the ESRI Streetmap symbols I like, and give them that same category name to make them easy to find later. (Note: The new category may not show up right away, but if you open and close ArcMap it will be there next time).
So, how does ArcMap save these symbols and where does it look for them next time? It saves them into something called a .style file. Every custom symbol defintion that you save is stored in your personal style file, located in \ApplicationData\ESRI\ArcMap\username.style. The ESRI styles are stored in \Program Files\ArcGIS\Styles. Both your personal style and the default ESRI style load every time ArcMap does. You can access the other ESRI styles by clicking on the More Symbols button in the symbol selector.
Just like layer files, you can manipulate these style files and share them with others. I found a cool one that Brady Davis shared back in 2005 to use as an example. He created a style based on Google Maps. You can download it at: http://conversationswithmyself.com/181/ Once you unpack it, you can add it to ArcMap by pressing the More Symbols button and selecting Add…
You can get to all the new Google symbols by navigating through the symbol selector for different symbol types. But if you’d like to take a quick peek at everything all at once, that’s what the Style Manager is for.
You can open the Style Manager by going to Tools –> Styles –> Style Manager in the main ArcMap interface. You will see your personal style there, the ESRI default style, and any other styles that you may have added or turned on. Here’s how the Google style looks:
You can see from the folder names that you can control much more than just point, line, fill and text symbols with the style manager. Folders are colored yellow if they have something in them.
Also, with the style manager, you can create new styles, and copy and paste elements from one style into another. So, you could copy all your favorite symbols into you personal style. Or, you could create and populate a style specifically for sharing with others. You can also delete elements you don’t like to reduce clutter.
In addition, Tools –> Style –> Style References lets you pick which styles will show up in the symbol selector window. So, you could create an mxd that only references a custom style you have created, thereby limiting the user’s options to a list of standard symbols.
So, with just a little tweaking I used the Google style to googleize a section of downtown Richmond.
Not too shabby! That’s the power of styles.
Tags: style manager, symbol