ESRI Shapefile - HTML5 Viewer

ESRI Shapefile - HTML5 Viewer

This is a neat way to display ESRI Shapefiles online without using any GIS software.
(Note: Not compatible with Internet Explorer)

Two shapefiles are displayed here cities of the world and associated text along with Countries of the World with a line style and  polygon fill style.

Notes: Keep shapefiles as small as possible, smaller shapefiles returns faster display results.

Faster than ArcIMS in some cases. But depends on the hosting server.

Mapperz Version, styles and fills changed, though seems slower, compare the difference.

The two files required are the .shp (geometry in lat/lng WGS84) and the .dbf (Table)

http://mapperz.110mb.com/shape/simple.html



source code changed:

var map = new Map('map', [
    // country shapes
    new Layer('http://mapperz.110mb.com/shape/110m_admin_0_countries', 

{ fillStyle: '#76e97c', strokeStyle: '#18841D', lineWidth: '0.5' }),
    // dots for cities
    new Layer('http://mapperz.110mb.com/shape/110m_populated_places',

 { fillStyle: '#8A2BE2', /*textHalo: '3', textStroke: 'white',*/ textFill: 'rgba(255, 0, 0, 0.6)', 

textProp: 'Name', font: 'bold 9px sans-serif' })

  ]);

  Links [source code:]

http://github.com/RandomEtc/shapefile-js

More complex version involves 10 shapefile layers.

http://s3.amazonaws.com/shapefile-js/naturalearthdata.html

source:

http://badassjs.com/post/845509816/rendering-binary-shapefiles-with-javascript

ArcGIS JavaScript Extension for the Google Maps API

Updated see red and blue below

ArcGIS JavaScript Extension for the Google Maps API
"The ArcGIS JavaScript Extension for the Google Maps API allows you to use your ArcGIS maps and tasks in the framework of Google Maps. There are many reasons to use this extension to expose your GIS data. Perhaps your audience already knows how to use Google Maps. Perhaps you're already familiar with the Google Maps API. Or maybe you just like the look and feel of the Google base maps."

Google Maps + Powerful GIS Analysis

Here is a Google Maps Direction Route - with the added profile of the route generated by ArcServer. (click image to see live example)

Here is another example of adding GIS capabilities to Google Maps.


Drive Time Polygons (1,2 & 3 minute driving time polygons) on the fly - overlaid on Google Maps. (click image to see live example)
Custom version http://mapperz.googlepages.com/DriveTime_ESRI_GMAP.html
(Drive Time only works in the US and Canada)

How is this geo-processing action created?


Image source: http://globe5.arcwebservices.com/arcgisoutput/Network_ESRI_DriveTime_US/CreateDriveTimePolygonsDisks.htm

ArcGIS comes with Model Builder here geoprocessing functions Make Service Area Layer, Add Locations are just some of the core processing elements to create Drive Time Polygons.

This is the start of some serious and powerful tools that will and can be built on to 'enrich' the map user.
This provides them with detailed information that can be manipulated and customized to the users specifications on the fly.

Other possibilities at the Geo-Processing Service examples here

• Display your own maps on top of a Google Maps base map.
• Execute a sequence of GIS models and display the results in Google Maps.
• Search for features in your GIS data and display the results on Google Maps.
• Find addresses using your own address locator and display the result on Google Maps.
• Display attributes from your GIS data on the map using the Google Chart API.
• Allows others to add GIS functionality from your server as a Google Mapplet.

The future looks bright with GIS software companies taking on popular mapping API's

Please note there is an ArcGIS JavaScript™ Extension for Microsoft Virtual Earth™ version as well.

Reported by Google Map Mania from this Blog

Google Maps Annotation (Label) Generator

Google Maps Annotation (Label) Generator




Easy to Create and Change - Limited Fonts


Can output in 3 formats
KML
Javascript (for Google Maps API)
Images

Try your own Label Generation here
http://ec.geoblogspot.com/GELab/ecLabel.htm

Credit to Valery Hronusov

Source:
http://googlemapsapi.blogspot.com/2008/04/text-images-without-much-coding.html

ArcWeb Explorer (Beta) 2.0

ArcWeb Explorer (Beta) 2.0
ArcWeb Explorer 2.0 application, which offers powerful Web map rendering with desktop-like functionality.


source: ESRI

The rotating map is a clever bit of code - the text flips (renders) itself when it goes beyond 180 degrees.

ArcWeb Explorer 2.0 Application	ArcWeb Explorer 2.0 Flex API	ArcWeb Explorer 2.0 JavaScript API
Exposes ArcWeb Services functionality through easy-to-use widgets	Enables developers to build and/or customize applications	Offers the use of a powerful subset of ArcWeb Services functionality
Offers the ability to quickly find locations, pan and zoom, and choose a map type	Provides access to all ArcWeb Services	Provides access to ArcWeb Services content
Provides access to street, street tile, aerial imagery, hybrid (integrated street and aerial), shaded relief, and topographic maps	Allows for easy and powerful ArcWeb integration inside Adobe Flex Builder	Enables easy integration of mapping functionality and content into HTML Web applications

NOTE: The Flex API is designed specifically for use within Adobe Flex 2. The JavaScript and Flex APIs are not designed for use within Adobe Flash Professional.
source: ESRI

To use this service you will be required to login in.
ArcWeb 2.0 Home Page


JavaScript Sample


Flex Example

Both have the code generated on the fly - therefore it is faster to get up and running with your own apps and data.

Is this to challenge the likes of Google Maps, Virtual Earth and Yahoo Maps API's?
We will see...

Mapperz

Return Latitude and Longitude Fast - Google Maps

Return Latitude and Longitude Fast with Google Maps

A Query from the Google Map API Group revealed a useful answer...

Question:
"How can I find coordinates where my firm is placed ? www.maps.google.com does not show these details! How to check that ?"

Answer:
Copy and Paste this code into the url once you have found your location

javascript:void(prompt('',gApplication.getMap().getCenter()));


returns a Longitude and Latitude


The method is very useful if you need to find these values frequently.

The JavaScript is book markable

In FF Create a new Bookmark
copy this url (can be google.ca google.com etc)

javascript:void(prompt
("http://www.google.co.uk/search?q=",gApplication
.getMap().getCenter()));



This will now be in your bookmarks toolbar.

Whenever you require a location coordinates on a google map click the bookmark and a prompt box displays the in latitude and longitude.

A combined effort from Mike, Barry, Esa and blogged by Mapperz

Drag Polylines in Google Maps (v2.70)

Some nice new functions are coming out of the Google Maps API.
(trying to keep it simple but this post gets a bit geeky)


ESA has been busy and demostrates the draggable Polyline.

So whats the fuss about that? Well there are alot more discoveries in this update.

Mike Williams seems to know whats going on in the latest javascript update (v2.70)
his comments below.

There's lots of strange goings on inside the API this time.

I've not yet worked out how to use it all, or what it all does.

I've not actually tested any of them yet. All this information is my
reading of the source code and crawling through that part of the DOM
that contains the functions. So it's quite possible that I've
misunderstood some of it.

New function
============
GVerify(la)
This one's weird. I can't see where they managed to hide the source. I'm
pretty sure that it isn't in the normal API code or in the API loader,
but the code somehow is present in the DOM.

New method
==========
GBounds.mid()
returns the GPoint at the centre of the GBounds.

Extra parameters
================
new GPolygon()
new GPolyline()
GPolyline.fromEncoded()
all accept one extra parameter, making a total of 7, 5, and 2 parameters
respectively. The additional parameter appears to be a set of
{GPolylineOptions}

New properties
==============
GPolyline.opacity
GPolyline.color
GPolyline.weight
Perhaps you can now do things like changing the weight of a polyline
when the zoom changes, and changing the colour when the maptype changes.
Previously the properties were inaccessible so you could only make such
changes by removing the old polyline and adding a new one.

If so, it's rather strange for Google to be exposing properties instead
of providing methods like GPolyline.setWeight() etc. It's not their
usual coding style.

New event
=========
visibilitychanged
Triggered by GMarker, GPolyline and GPolygon when their .hide() or
.show() method is called. Returns a parameter which is true for .show()
and false for .hide().

New GMarkerOptions
==================
description
name
zIndexProcess

zIndexProcess sounds like fun. You can set it to a function(marker,b)
that returns a zIndex value for the marker instead of using the normal
API internal function that puts the southerly markers on top.

new GPolyLineOptions
====================
id
name
outline
mapsdt

new GMapOptions
===============
mapOrderMarkers
It looks like you can set this to be a reference to an ordering
function, as used in an Array.sort() call. If you use the option, then
the API will call markers.sort(yourfunction). I've no idea why you might
want to do that.

new GDraggableObjectOptions
===========================
restrictX

--
If your a bit of a javascript buff you can access these functions by changing your api key code.
from:
http://maps.google.com/maps?file=api&v=2&key=YOUR KEY HERE
to:
http://maps.google.com/maps?file=api&v=2.70&key=YOUR KEY HERE

Well done Mike and Esa good work, nice examples coming soon