View
0
Download
0
Category
Preview:
Citation preview
ITS488 – Geographic Informa5on System
Teerayut Horanont, PhD Sirindhorn Interna5onal Ins5tute of Technology (SIIT) Thammasat University E: teerayut@siit.tu.ac.th
10-‐1 Mapbox Design the map
2014 10 21
10/21/14 ITS488 1
Today outline
1. Design your map using Mapbox and leaflet 2. Basic map applica5on handon
10/21/14 ITS488 2
10/21/14 ITS488 3
h"ps://www.mapbox.com
10/21/14 ITS488 4
10/21/14 ITS488 5
10/21/14 ITS488 6
hRps://www.mapbox.com/mapbox.js/api
10/21/14 ITS488 7
A simple map Ini5alizing a Map in an HTML element.
Include mapbox.js and CSS in your HTML header and call L.mapbox.map('map', 'examples.map-‐i86nkdio') to load your first map.
10/21/14 ITS488 8
Before ge\ng start • hRp://brackets.io/
10/21/14 ITS488 9
Download Brackets Release 0.44 (OSX) Then install !!
10/21/14 ITS488 10
<html> <head> <meta charset=u`-‐8 /> <5tle>A sample map</5tle> <meta name='viewport' content='ini5al-‐scale=1,maximum-‐scale=1,user-‐scalable=no' /> <script src='hRps://api.5les.mapbox.com/mapbox.js/v2.1.2/mapbox.js'></script> <link href='hRps://api.5les.mapbox.com/mapbox.js/v2.1.2/mapbox.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { posi5on:absolute; top:0; boRom:0; width:100%; } </style> </head> <body> <div id='map'></div> <script> var mapboxTiles = L.5leLayer('hRps://{s}.5les.mapbox.com/v3/examples.map-‐i87786ca/{z}/{x}/{y}.png', { aRribu5on: '<a href="hRp://www.mapbox.com/about/maps/" target="_blank">Terms & Feedback</a>' }); var map = L.map('map') .addLayer(mapboxTiles) .setView([40, -‐74.50], 9); </script> </body> </html>
A simple map
10/21/14 ITS488 11
Exercise 1 Create a simple map using Mapbox API.
-‐ Set the view to SIIT and zoom to see the SIIT building. Hint: you can find SIIT’s la5tude and longitude from Google map
Try to change zoom level un5l you find a proper view
10/21/14 ITS488 12
There are several Tile services out there, both free and paid service. Here is a sample of OpenStreetmap (OSM) 5le server and Google 5le server OSM Add OSM Tile layer var osmUrl='hRp://{s}.5le.openstreetmap.org/{z}/{x}/{y}.png'; var osmARrib='Map data © <a href="hRp://openstreetmap.org">OpenStreetMap</a> contributors'; var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 15, aRribu5on: osmARrib});
Google Add google API javascript <script src="hRp://maps.google.com/maps/api/js?v=3.2&sensor=false"></script> <script src="hRp://matchingnotes.com/javascripts/leaflet-‐google.js"></script> Add Google map Tile layer var googleLayer = new L.Google('ROADMAP');
10/21/14 ITS488 13
Exercise 2 Create a simple map using Mapbox API and change Tileserver to OSM
-‐ Set the view to SIIT and zoom to see the SIIT building. Exercise 3 Create a simple map using Mapbox API and change Tileserver to Google
-‐ Set the view to SIIT and zoom to see the SIIT building. Do you know that Google have several Tile server? Try to find other google Kle servers and replace it.
More… with examples
10/21/14 ITS488 14
hRps://www.mapbox.com/mapbox.js/example/v1.0.0/
Open for ques5ons
10/21/14 ITS488 15
Recommended