Mapping Like Google Edward Svirsky Presented by Mark Scheel.

Slides:



Advertisements
Similar presentations
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Advertisements

MASTERY OBJECTIVE: Learn parts of an html document Learn basic html tags HTML-An Introduction.
SEO Best Practices with Web Content Management Brent Arrington, Services Developer, Hannon Hill Morgan Griffith, Marketing Director, Hannon Hill 2009 Cascade.
Google I/O 2010 Notes Talk: Measure in milliseconds redux: Meet Speed Tracer Notes by: Armando Padilla.
HCI 201 Week 6 Client Side Image Maps Introduction to CSS.
Introduction General Data Structures - Arrays, Linked Lists - Stacks & Queues - Hash Tables & Binary Search Trees - Graphs Spatial Data Structures -Why.
INTRODUCTION OF WEB DESIGN 2003 TALL SUMMER INSTITUTE 7/7/2003 Chi-Hua Tseng.
World Wide Web1 Applications World Wide Web. 2 Introduction What is hypertext model? Use of hypertext in World Wide Web (WWW) – HTML. WWW client-server.
Introduction General Data Structures - Arrays, Linked Lists - Stacks & Queues - Hash Tables & Binary Search Trees - Graphs Spatial Data Structures -Why.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Does Ajax suck? CS575 Spring 2007 Chanwit Suebsureekul.
Elision Based Text Zooming Sam Davis. 2 Basic Idea Add zoom control to web browser Zoom out to show more of document Focused on text, not images Instead.
Elision Based Text Zooming Project Update Sam Davis.
Geographic Information System By: Scott Wiegal Mitchell Mathews.
Inline, Internal, and External FIle
Chapter 14 Introduction to HTML
 What I hate about you things people often do that hurt their Web site’s chances with search engines.
Intranet and internet based software components. 2 Overview  What are intranet and internet based map applications?  System Requirements  Architecture.
Dynamic Web Pages (Flash, JavaScript)
GIS technologies and Web Mapping Services
UNIT 8 DRAWING WITH THE HTML5 CANVAS ELEMENTS AND FORMS.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript.
Chapter 5 Creating an Image Map.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
The New Elements © Main Menu Structure Media Canvas Form Click on one of the categories below to view information about the new HTML5 elements in.
Interactive Client-Side Technologies MMIS 656 Web Design Technologies Acknowledgements: Estrella, S. (2003). The Web Wizard’s Guide to DHTML and CSS.
Live Demo Augmented reality – lets see some pictures flying…Augmented reality – lets see some pictures flying… Facebook -Facebook -
Introduction to Programming the WWW I CMSC Summer 2003 Lecture 7.
Introduction to Client Side Scripting CS Client Side Scripting Client side means the Browser is interpreting the script Script is downloaded with.
Creating User Interfaces Recap HTML/HTML5 JavaScript features Homework: keep working on user observation studies. Review JavaScript.
Session: 1. © Aptech Ltd. 2Introduction to the Web / Session 1  Explain the evolution of HTML  Explain the page structure used by HTML  List the drawbacks.
Graduate School of Library and Information Science LIS 753 Introduction to HTML 5 By: Yijun Gao Week Three.
Geo-processing tools Tools: Buffer Geo-processing tools allow you to work with your data bases on spatial relations.... at a specified distance... with.
Dr. Martin Zhao Sept 4, Topics HTML and related tutorials on w3schools.com Related HTML tags Adding interesting features using JavaScript What is.
How to use this tutorial > You can run the whole show by using the slide show button (excluding firefox) at the bottom right, use the escape key to exit.
Maps. Google Earth is a great resource, but is often blocked by school districts because of its size. Google maps and Bing maps share many of the features.
Types of Spatial Data Sites Data portals: Find and download data –Humboldt County, National Atlas “Atlases”: General information –GoogleMaps, MapQuest.
Forms Collecting Data CSS Class 5. Forms Create a form Add text box Add labels Add check boxes and radio buttons Build a drop-down list Group drop-down.
LBR & WS LAB 1: INTRODUCTION TO GIS.
HTML JAVASCRIPT. CONTENTS Javascript Example NOSCRIPT Tag Advantages Summary Exercise.
?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.
Implementation of Google Map in Drupal Create in Miyula Zeng, XiaoHang Zou,
Enterra Web GIS Embedded Flash System. Application Features 1. Dynamic data loading and caching Minimum data transfer on startup Additional data transfer.
The Web Wizard’s Guide To DHTML and CSS Chapter 2 A Review of CSS2 and JavaScript.
1 CSC160 Chapter 1: Introduction to JavaScript Chapter 2: Placing JavaScript in an HTML File.
Project: Web Designer. Phase 1: The World Wide Web.
Lecture 9: Extra Features and Web Design Tarik Booker CS 120 California State University, Los Angeles.
FORMS Explained By: Jasdeep Kaur. Lecturer, Department of Computer Application, PGG.C.G., Sector: 42, Chandigarh.
HTML Help book. HTML HTML is the programming language used to make web pages for the Internet. HTML stands for Hyper Text Markup Language. HTML is made.
Technical SEO tips for Web Developers Richa Bhatia Singsys Pte. Ltd.
Ajax & Client-side Dynamic Web Gunwoo Park (Undergraduate)
Dennis Decelle GEOG 385 American River College Fall 2014.
Marine Digimap digimap.edina.ac.uk
Digimap Ordnance Survey - Roam
Intro to JavaScript CS 1150 Spring 2017.
Putting Things Where We Want Them
AJAX.
Dynamic Web Pages (Flash, JavaScript)
HEATHER HALL & ADRIENNE SPITZER
Dynamic Web Pages Jin Wu INF 385E Information Architecture
Types of Spatial Data Sites
Chapter 16 The World Wide Web.
Types of Spatial Data Sites
Types of Spatial Data Sites
Question Examples Is the interactive Google map useful?
Christopher Harrison Jeremy Foster
Presentation transcript:

Mapping Like Google Edward Svirsky Presented by Mark Scheel

Purpose –Display listings on map –Display surrounding information ( schools, parks, etc …) Mapping

Current Metrolist Mapping ESRI –Provides Metrolist with a map server –ESRI provides a way to put layers on the maps ( roads, parks, etc … ) –Static images and dynamic maps

Current Metrolist Mapping Current maps for listings are static 1.Calculate coordinates 2.Get map as image 3.Listings show up as part of image Metrolist’s dynamic map –The dynamic map allows full navigation –The dynamic map doesn’t show listings on it

Problems with current approach –Static maps don’t provide much information about surrounding region –Hard to tell precise location –Multiple listings on a single map make it hard to distinguish between listings Current Metrolist Mapping

Future Metrolist Mapping Dynamic maps with dynamic content –Navigation – zoom in/out, scrolling –Listing information available on the map –Polygon selection and search integration

Detailed Mapping Mapping DHTML –Dynamic navigation using JavaScript (on click coordinate recalculations) –IMG tag changes src element to get the correct image –Markers are loaded with information and info is hidden from view

Polygon Selection –Concave polygons –Graphics library - wz_jsgraphics by Walter Zorn –Line drawing and Vector collision detection Can’t intersect –Unlimited number of points –Client vs. Server Detailed Mapping

Challenges Compatibility issues –DHTML and browser compatibility –Current mapping browser support Speed –Client bottlenecks –Server bottlenecks –Transfer bottlenecks

Future Features Dynamic loading of large image blocks for instantaneous scrolling. Large Image Visible Image Load on Demand

Future features Integrated search engine –The Metrolist search engine will be integrated with the map.

Q&A