Posts Tagged ‘xml’

FXG: Illustrator and Dreamweaver Integration!?

Friday, October 16th, 2009

[Editor’s note: I’ve known about the FXG format for exchanging content between Illustrator and Flash via Flash Catalyst for a while now but have never been excited about it until seeing this video from Adobe’s MAX Sneaks session last week. It previews how FXG might one day (CS5?) allow live data binding (read automatically updating charting, etc) based on a design mocked up in Illustrator but deployed via Dreamweaver as HTML 5 (and iPhone compatible) or Flash via SWF.]

Republished from Mordy’s Real World Illustrator blog.
Another take at: //commentedout and video source at YouTube.

So take a look at this video that someone captured from this year’s Adobe MAX Sneaks session — a demo of technology showing integration between Illustrator and Dreamweaver. If it isn’t clear in the video clip below what is happening, I’ll spell it out for you: He starts by taking art drawn in Illustrator and copies it to the clipboard. Then he goes into Dreamweaver, selects a DIV and chooses a function called Smart Paste. Dreamweaver then pastes an FXG conversion of the Illustrator art directly into the page. If you aren’t familiar with FXG, it’s basically a better SVG (you can get more information on the open source FXG spec here). In other words, you draw in Illustrator, copy and paste into Dreamweaver (which converts it to code), and the art displays as vector art in a web browser. What’s more, the engineer proceed to actually bind XML data to the chart.

As I mentioned, I think this is probably something that is way way off in the future, but it’s still quite incredible. Maybe there’s some hope for us all, after all 🙂

Continue reading at Mordy’s Real World Illustrator . . .

Instance_setMcName Flash Script + MaPublisher = Flash Interactive Thematic Mapping (Kelso)

Wednesday, April 29th, 2009

charlestonelectionresults

[Editor’s note: Making the GIS > Illustrator > Flash workflow a 30 minute process instead of a 30 hour slog. Thanks Sebastian!]

Ken Hawkins, formerly of The Post and Courier newspaper (Charleston, SC) helped me figure out how to take GIS shapefile data (point, line, and polygon) prepped in ArcMap or similar, process it in Illustrator using the Avenza MaPublisher plugin, and then copy-paste import into Flash CS3+ and apply the Instance_setMcName script. I first saw his handywork in the http://www.charleston.net/graphics/200802_primary/ map which is illustrated at the top of this post. I first learned of this technique last year but I think it is still relevant so am posting it now.

Ken had help from Len De Groot over at newsartists.org ( http://www.newsartists.org/forums/showthread.php?p=41780, registration required). I have reformatted and edited Ken and Len’s instructions below.

Requirements:
  • A shapefile,
  • Illustrator CS3,
  • MaPublisher (Illustrator plugin),
  • Flash CS3, and
  • Free command script called “Instance_setMcName”. Before you start, download the script from Adobe, registration required (alternate download, no registration required) and double click file icon to install the script into Flash. Relaunch Flash to enable the script.

Overview:

  • Shapefile prep work in ArcMap GIS as needed.
  • Import the shapefile (.shp) in Illustrator using MaPublisher. Each geographic feature imports as it’s own path object in illustrator, visible in the Layers panel when it is set to not just show top level layers.
  • Use MaPublisher to name each map object’s GIS database attribute to name itself.
  • Import the Illustrator file to Flash .
  • Run the script to take the movieclip names and apply them to instances.

Detailed Workflow:

  1. Shapefile prep work in ArcMap as needed.
  2. Open your GIS shapefile in Illustrator via the MaPublisher plugin (File > Import Map Data).
  3. Edit > Select All the imported map path objects.
  4. Open the MapAttributes panel by going to View > MaPublisher > MapAttributes.
  5. In your MapAttributes panel, use the flyout menu to select Edit Schema.
  6. Select the #Name (usually selected by default) in the list of columns.
  7. Check the box marked “Derive value from expression”
  8. Click the “…” button.
  9. In the resulting dialog’s text entry field, type in the name of the field you want to use to name the individual polygons (county, precinct, etc.). This is case sensitive.
  10. Hit OK twice.
  11. Watch as your individual path objects are named in the Layers panel then save the file.
  12. Open Flash and import the AI file to the stage (File > Import).
  13. In the Import dialog box, select all the sublayers and check the box named “Create movie clip” and hit OK. The map will be imported both onto the stage and each map object will be added to the document’s Library.
  14. In the Library panel, select all the MovieClips in the Illustrator Import sub-folder and drag them up and out of the folders to the top level.
  15. Use Edit > Select All to select all your map object symbols on the stage.
  16. Under “Commands” in the top menu, select “Instance_setMcName.”
  17. All you symbol instances will be named the same as their parent movieClip libary item. Use the Properties panel to verify this.

Both Ken and I have used this process on multiple shapefiles with hundreds of objects and it’s worked like a dream.

Caution on Numeric Names:

Some GIS shapefiles have category names that begin with numbers, which Flash doesn’t like. Flash is picky about some other characters starting off the name, too, so when in doubt, use the following solution.

You can edit the schema to add a letter in front of each name and then use actionscript to do the same to each item in your XML file. A little cloogy but better than the alternative.

  1. Click the Add button in the Edit Schema window in MaPublisher’s Illustrator panel
  2. Name the new column “a”. Make sure the Type is string and enter “a” for the value (the derive value button must be unchecked to see this option).
  3. Press enter.
  4. Select #Name column.
  5. Find the expression field in the same dialog and type out “a&PRECINCT” (where “a” is the “a” attribute column name and PRECINCT is the attribute column name). Note: the & symbol is used to concatenate (add together) the string values in each attribute column.
  6. Press enter.
  7. Verify the name changes in the Layers panel.

Seperate Stroke and Fill Workflow:

To have a seperate stroke layer on polygons so the fills can be color coded seperately from the strokes (which would always maintain the same stroke color) you’ll need to make a 2nd copy of the symbols:

  1. In Illustrator after you’ve used MaPublisher to name all your polygons appropriately, duplicate the layer and hide/lock the original layer.
  2. Give the new polygons a stoke and no fill, and rename them using Steps 3-6 except append the naming scheme with “Stroke”
  3. Import the Illustrator file to Flash. Two groups of symbols are imported.One group’s symbols will be named something like “precinct234” and the other group’s corresponding symbols will be named “precinct234Stroke”
  4. Flash can now be instructed via ActionScript coding to independently control a symbols fill and whether or not it is “highlighted” with a stroke.

Bonus Feature!

Use MaPublisher to import other GIS layers (roads, polling locations, etc.) and they will land directly on top of the thematic symbols. I recommend doing this in the same import session, or before you rescale the maps. Best results when all GIS shapefiles are already in the same projection.

To set up your XML which is used to import your map data values (essentially an XML version of your DBF file associated with the shapefile), check out Layne’s thread.

Newsflash! ESRI to best Google Maps with Mashup Capability

Monday, May 12th, 2008

(Reprinted from flex888.com. View original post.)

Finally, GeoWeb is Complete and Born

Posted by Moxie | March 19, 2008 .

What’s is the best RIA application ever created? If your answer is something aroundFlex or Flash, then it’ll be wrong answer. The right answer is Google Map. It’s Google Map makes AJAX known and RIA a reality. Google even goes above and beyond claimed the term “GeoWeb“. However, up till now, Google Map is still just the best client, the visualization end, of GeoWeb. The “Geo” part of GeoWeb was missing.

Yesterday, ESRI, the shy, but true and real “Geo” dude behind all, I mean ALL, the web map buzz and technologies, released its very own JavaScript API and REST based Geo Process services to the world. The GeoWeb is finally complete and born.

The JavaScript API has three parts, the ESRI JavaScript API, the Google Map extension, the Virtual Earth extension. That means you can use the top three GeoWeb clients with this simple API to do the real “Geo” things.

What is the “Geo” things and why it’s a big deal to GeoWeb?

Well, everyone and his/her grandma knows what Google Map does, plans the trip and shows locations. What’s the most mashed up platform? Google Map. What 99% Google Map mashup applications do? Put pins (markers) on the map? But what if we want to ask some questions beyond the pushpins:

  • Within 5 minutes driving time, show me the areas that I can reach. Don’t fool me with a circle. That is cheating. Because there might be highway, service street, or river among the 5 minutes driving range. The area you can cover by driving is a irregular polygon. But how do you get that polygon drawn on the map to show the 5 minute driving range?
  • Three of my friends want to meet for lunch. We want to meet at a Starbucks where everybody has the least driving time to get there. Fair enough? But how do you quickly give me that Starbucks location and provide driving direction for each of us.

The questions can go on and on. How these questions are answered? Through a thing called Geoprocessing, which is provided by the technology called GIS (geographic information system). But why you’ve never heard of it and it’s not well known in the Web 2.0 space? That’s because it’s a very hard nut to crack and only a few dudes know how to do it inside out. ESRI is the one does it the best, and now, it gets everything figured it out. The whole web can have it.

If I tell you, with three lines of JavaScript codes, plus some regular JavaScript programming you can easily answer the above question visually on either ESRI map, Google Map or Earth Map. Do you believe me?

You don’t have to because I’ll show you how.

First Line:

    var map = new esri.Map(“mapDiv”, { extent: startExtent });

Looks familiar, isn’t it. Indeed, it’s just like Google Map or Virtual Earth API.

Second Line:

    var streetMap = new esri.layers.ArcGISTiledMapServiceLayer
(“http://server.arcgisonline.com/ArcGIS/rest/services/
ESRI_StreetMap_World_2D/MapServer”);

Something new here. Well, if you head to ArcGIS Online, a free gwoweb resource from ESRI, you would find out there are lots of good free base maps you can choose. Or, you can use any map published to a ArcGIS Server. It’s long story here for those map publishing goodies, I’ll tell you later, piece by piece. But just you know this line of code gives you a whole big world of maps to works with. Just remembering that is enough for now.

Third Line:

var gp = new esri.tasks.Geoprocessor
(“http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/
Network/ESRI_DriveTime_US/ GPServer/CreateDriveTimePolygons”);

This is “Geo” part of the GeoWeb. One line, it consumes a geoprocess, in this case, a services called CreateDriveTimePolygons. This geoprocess called is actually via REST API (as the URL reveals) . The returned result can be in JSON, KML or XML. That means you really don’t have to use this JavaScript API. As matter of fact, I do have Perl or PHPexamples consume the very same gepprocess, but that’ll be another post.

The rest code is really just parse the result and draw the polygon on the map. If you know Google Map API, there are no surprises there.

The following is the true GeoWeb application I’ve introduced to you. You can zoom in to any city just like you would do with gmap (scrolling mouse, drag the map, etc.). Then click the map. The 1, 3 and 5 minutes driving time polygon will be shown.

Click Here to Run the Application (view source for detail code).

I will post another example to solve that other problem using Flex. Stay tuned.

Iraq Bombings Map

Sunday, January 13th, 2008

iraq big bombsMy colleagues at The Washington Post, Gene Thorp and Nelson Hsu, published an Iraq “Big Bombings” map recently using some Flash ActionScript code that I developed. The map allows you to track some of the deadliest attacks in Iraq since September 2006. Markers represent incidents in which 20 or more people were killed. Rolling over a marker will show that incident’s details.

The code behind the scenes is reading latitude and longitudes in decimal degrees and projecting the coordinates on-the-fly to the map’s Albers x-y space and scaling them to screen coordinates onto the base map. This makes updating the map’s thematic content a breeze since only the XML text file powering the thematic layer needs to be updated (the Flash base map doesn’t need to be regenerated).