Intro to Web Map APIs

•Als PPTX, PDF herunterladen•

0 gefällt mir•743 views

Yos Riady

Slides for "A gentle introduction to Web Map APIs" for Orbital students.

Ingenieurwesen

Maps on the Web
Can you name sites with interactive maps?

Agenda for today
Interactive maps
● Brief intro on Web Map APIs
● Hands-on tutorial
● Project time
● Q&A

What is an API?
API stands for:
a. Agricultural Price Index
b. Application Programmers Initiative
c. Asia Pacific Institution
d. Apple Products, Inc.
e. Application Programming Interface

Application Programming Interface
class MyWatch:
def turn(self, degrees):
complex_operationA()
complex_operationB()
complex_operationC()
def display(self):
complex_operationD()
complex_operationE();

What are Web APIs?
● APIs connected through HTTP
http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-
47.91378&zoom=11&size=200x200

What are Web APIs?
● APIs connected through HTTP (see geocoder.py)
http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-
47.91378&zoom=11&size=200x200
● API libraries/wrappers

What are Web APIs?
● APIs connected through HTTP
http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-
47.91378&zoom=11&size=200x200
● API libraries/wrappers
● Sometimes free, often commercial
● Commercial APIs charge based on usage

Working with Web Map APIs
● Register for an API Key (where applicable)
● Include the Map API library’s CSS and Javascript files
● Read the API documentation
● Write map features using the API/library’s methods
● PROFIT!!!

Today
Used by Flickr, Foursquare, Pinterest, Wikipedia!

What we will be covering
● Basic Maps
● Tile Providers
● Markers, Popups, and more
● Events
● Geolocation
● Geocoding
● Routing

Project Super Fun Time
http://leventhan.github.io/orbital-leaflet/

Questions?
Yos Riady | yosriady@nus.edu.sg

Weitere ähnliche Inhalte

Andere mochten auch

React entryNobuaki Miura

Introduction to ReactYos Riady

Repaint & reflowKingsley Zheng

Synchronizing application state using Virtual DOM treesJari Voutilainen

Introduction to ReactQuentin Leonetti

Digitaalisesti vaikuttavaksi. @HelsinkiUniUX -projektin tarina University of Helsinki

Why and How to Use Virtual DOMDaiwei Lu

React.js - The Dawn of Virtual DOMJimit Shah

ReactNativeを語る勉強会yohei sugigami

Pjax 深入淺出Kingsley Zheng

ReactMinJae Kang

From Back to Front: Rails To React FamilyKhor SoonHin

React Native - WorkshopFellipe Chagas

Introduction to ReactJSHoang Long

React.js in real world apps. Emanuele DelBono

[@NaukriEngineering] Git Basic Commands and HacksNaukri.com

An Introduction to ReactJSAll Things Open

ReactJS presentationThanh Tuong

Intro to react nativeModusJesus

React - render() to DOM - Boris Dinkevich - Codemotion Milan 2016Codemotion

Andere mochten auch (20)

React entry

Introduction to React

Repaint & reflow

Synchronizing application state using Virtual DOM trees

Introduction to React

Digitaalisesti vaikuttavaksi. @HelsinkiUniUX -projektin tarina

Why and How to Use Virtual DOM

React.js - The Dawn of Virtual DOM

ReactNativeを語る勉強会

Pjax 深入淺出

React

From Back to Front: Rails To React Family

React Native - Workshop

Introduction to ReactJS

React.js in real world apps.

[@NaukriEngineering] Git Basic Commands and Hacks

An Introduction to ReactJS

ReactJS presentation

Intro to react native

React - render() to DOM - Boris Dinkevich - Codemotion Milan 2016

Ähnlich wie Intro to Web Map APIs

Write an API for Almost Anything: The Amazing Power and Flexibility of Django...Caktus Group

Google APIkueppi

Utilizing HTML5 APIsIdo Green

Why APIs are Different Than IntegrationApigee | Google Cloud

[English] Create Mobile LBS Application Using Maps APIGoogle Cloud Platform - Japan

Jefferson Andrade - Esri Dev Summit 2016 #02 - Dev ToolsJefferson Andrade

Architecture for the API-enterpriseApigee | Google Cloud

Modern Web Applications Utilizing HTML5 APIsIdo Green

Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Ido Green

Adobe App Builder Overview & Get Started GuidelineTuyen Nguyen Ngoc

Integrating Google APIs into Your ApplicationsChris Schalk

Gmaps001infovis321

WSO2Con Asia 2014 - Building the API-Centric EnterpriseWSO2

API Marketing: First Comes Usability, Then DiscoverabilityBill Doerrfeld

LF_APIStrat17_API Marketing: First Comes Usability, then DiscoverabilityLF_APIStrat

A_Complete_Guide_to_API_Development.pdfPamRobert

Introduction to PhoneGapRamesh Nair

Google Cloud Platform UpdateIdo Green

Mobile backends with Google Cloud Platform (MBLTDev'14)Natalia Efimtseva

Introduction to Google Cloud Endpoints: Speed Up Your API DevelopmentColin Su

Ähnlich wie Intro to Web Map APIs (20)

Write an API for Almost Anything: The Amazing Power and Flexibility of Django...

Google API

Utilizing HTML5 APIs

Why APIs are Different Than Integration

[English] Create Mobile LBS Application Using Maps API

Jefferson Andrade - Esri Dev Summit 2016 #02 - Dev Tools

Architecture for the API-enterprise

Modern Web Applications Utilizing HTML5 APIs

Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)

Adobe App Builder Overview & Get Started Guideline

Integrating Google APIs into Your Applications

Gmaps001

WSO2Con Asia 2014 - Building the API-Centric Enterprise

API Marketing: First Comes Usability, Then Discoverability

LF_APIStrat17_API Marketing: First Comes Usability, then Discoverability

A_Complete_Guide_to_API_Development.pdf

Introduction to PhoneGap

Google Cloud Platform Update

Mobile backends with Google Cloud Platform (MBLTDev'14)

Introduction to Google Cloud Endpoints: Speed Up Your API Development

Mehr von Yos Riady

Brief introduction to Serverless (2018)Yos Riady

Type Checking in Javascript with FlowYos Riady

Schema-First API DesignYos Riady

Writing Domain Specific Languages with JSON SchemaYos Riady

GraphQL in an Age of RESTYos Riady

Python List ComprehensionsYos Riady

Ruby on Rails WorkshopYos Riady

Online Payments and YouYos Riady

Entity Component SystemsYos Riady

Mehr von Yos Riady (9)

Brief introduction to Serverless (2018)

Type Checking in Javascript with Flow

Schema-First API Design

Writing Domain Specific Languages with JSON Schema

GraphQL in an Age of REST

Python List Comprehensions

Ruby on Rails Workshop

Online Payments and You

Entity Component Systems

Kürzlich hochgeladen

(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...ranjana rawat

VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130Suhani Kapoor

IMPLICATIONS OF THE ABOVE HOLISTIC UNDERSTANDING OF HARMONY ON PROFESSIONAL E...RajaP95

MANUFACTURING PROCESS-II UNIT-5 NC MACHINE TOOLSSIVASHANKAR N

Call Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur EscortsCall Girls in Nagpur High Profile

Software Development Life Cycle By Team Orange (Dept. of Pharmacy)Suman Mia

Coefficient of Thermal Expansion and their Importance.pptxAsutosh Ranjan

MANUFACTURING PROCESS-II UNIT-2 LATHE MACHINESIVASHANKAR N

College Call Girls Nashik Nehal 7001305949 Independent Escort Service NashikCall Girls in Nagpur High Profile

DJARUM4D - SLOT GACOR ONLINE | SLOT DEMO ONLINEslot gacor bisa pakai pulsa

VIP Call Girls Service Hitech City Hyderabad Call +91-8250192130Suhani Kapoor

APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICSKurinjimalarL3

★ CALL US 9953330565 ( HOT Young Call Girls In Badarpur delhi NCR9953056974 Low Rate Call Girls In Saket, Delhi NCR

(RIA) Call Girls Bhosari ( 7001035870 ) HI-Fi Pune Escorts Serviceranjana rawat

UNIT-V FMM.HYDRAULIC TURBINE - Construction and workingrknatarajan

HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICSRajkumarAkumalla

Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur EscortsCall Girls in Nagpur High Profile

Porous Ceramics seminar and technical writingrakeshbaidya232001

The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...ranjana rawat

UNIT-II FMM-Flow Through Circular Conduitsrknatarajan

Kürzlich hochgeladen (20)

(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...

VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130

IMPLICATIONS OF THE ABOVE HOLISTIC UNDERSTANDING OF HARMONY ON PROFESSIONAL E...

MANUFACTURING PROCESS-II UNIT-5 NC MACHINE TOOLS

Call Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur Escorts

Software Development Life Cycle By Team Orange (Dept. of Pharmacy)

Coefficient of Thermal Expansion and their Importance.pptx

MANUFACTURING PROCESS-II UNIT-2 LATHE MACHINE

College Call Girls Nashik Nehal 7001305949 Independent Escort Service Nashik

DJARUM4D - SLOT GACOR ONLINE | SLOT DEMO ONLINE

VIP Call Girls Service Hitech City Hyderabad Call +91-8250192130

APPLICATIONS-AC/DC DRIVES-OPERATING CHARACTERISTICS

★ CALL US 9953330565 ( HOT Young Call Girls In Badarpur delhi NCR

(RIA) Call Girls Bhosari ( 7001035870 ) HI-Fi Pune Escorts Service

UNIT-V FMM.HYDRAULIC TURBINE - Construction and working

HARDNESS, FRACTURE TOUGHNESS AND STRENGTH OF CERAMICS

Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur Escorts

Porous Ceramics seminar and technical writing

The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...

UNIT-II FMM-Flow Through Circular Conduits

Intro to Web Map APIs

1. Web Map APIs Yos Riady | yosriady.com

2. http://goo.gl/s6Y1w4

4. Maps on the Web Can you name sites with interactive maps?

8. Agenda for today Interactive maps ● Brief intro on Web Map APIs ● Hands-on tutorial ● Project time ● Q&A

10. What is an API? API stands for: a. Agricultural Price Index b. Application Programmers Initiative c. Asia Pacific Institution d. Apple Products, Inc. e. Application Programming Interface

11. What is an API? API stands for: a. Agricultural Price Index b. Application Programmers Initiative c. Asia Pacific Institution d. Apple Products, Inc. e. Application Programming Interface

12. Application Programming Interface class MyWatch: def turn(self, degrees): complex_operationA() complex_operationB() complex_operationC() def display(self): complex_operationD() complex_operationE();

13. What are Web APIs? ● APIs connected through HTTP http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,- 47.91378&zoom=11&size=200x200

14. What are Web APIs? ● APIs connected through HTTP (see geocoder.py) http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,- 47.91378&zoom=11&size=200x200 ● API libraries/wrappers

15. What are Web APIs? ● APIs connected through HTTP http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,- 47.91378&zoom=11&size=200x200 ● API libraries/wrappers ● Sometimes free, often commercial ● Commercial APIs charge based on usage

16. Web Map API Services and many others!

17.

18.

19.

20. Working with Web Map APIs ● Register for an API Key (where applicable) ● Include the Map API library’s CSS and Javascript files ● Read the API documentation ● Write map features using the API/library’s methods ● PROFIT!!!

21. Today Used by Flickr, Foursquare, Pinterest, Wikipedia!

22. Introducing Leaflet

23.

24. Hands On Time

25. What we will be covering ● Basic Maps ● Tile Providers ● Markers, Popups, and more ● Events ● Geolocation ● Geocoding ● Routing

26. github.com/Leventhan/orbital-leaflet/

27. Project Super Fun Time http://leventhan.github.io/orbital-leaflet/

28.

29. Where do I go from here?

30.

31.

32.

33. Questions? Yos Riady | yosriady@nus.edu.sg

Intro to Web Map APIs

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Intro to Web Map APIs

Ähnlich wie Intro to Web Map APIs (20)

Mehr von Yos Riady

Mehr von Yos Riady (9)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Intro to Web Map APIs