Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for...
Transcript of Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for...
![Page 1: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/1.jpg)
Utilizing free open source tools to create interactive web maps in order to visualize (StatsCan) data
Calgary 2015
![Page 2: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/2.jpg)
outline
• data libraries have amazing resources… • visualize the data (to promote the collection)
• web map(s)
• types of web maps (specific “type” of web map) • how?!
• considerations
![Page 3: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/3.jpg)
thousands of aerial photos and maps… Historical and remnant orchards, (2013)
3
A227-65, 1928
![Page 4: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/4.jpg)
Land use change over time, (2014)
4
A227-65, 1928
![Page 5: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/5.jpg)
5
(part of sheet) NTS 92F/13: before / after 1952-54 dam construction
1946: 1st edition 2011 4th edition
![Page 6: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/6.jpg)
Before Mica Dam
![Page 7: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/7.jpg)
hundreds of data sets…
7
A227-65, 1928
[section of] Victoria S.415a, 1934
![Page 9: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/9.jpg)
9
StatsCan interactive maps
![Page 10: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/10.jpg)
StatsCan GeoSearch
10
![Page 11: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/11.jpg)
11
GeoSearch: slow…clunky…not functioning…?
![Page 12: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/12.jpg)
12
GeoSearch: Census “regions” are greyed out and do not work…?
![Page 13: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/13.jpg)
13
StatsCan NHS thematic maps…???
![Page 14: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/14.jpg)
14
StatsCan Census thematic maps
![Page 15: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/15.jpg)
15
![Page 16: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/16.jpg)
[section of] Victoria S415a, 1934
16
![Page 17: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/17.jpg)
17
![Page 20: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/20.jpg)
Winnipeg 1971 Census Tracts: % Households Ukrainian Origin
![Page 21: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/21.jpg)
Wpg 1971 CTs: 5-9 yr olds & % households Ukrainian origin
![Page 22: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/22.jpg)
Wpg 1971 CensusTracts: % Households w/ Colour TV over Avg.Family Income
![Page 23: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/23.jpg)
Web Maps
Types of web maps
• some spatial analysis
• download data / upload data
• zoom, pan, turn off/on, click for more info
• zoom, pan, turn off/on elements/layers
• zoom, pan
• .pdf with elements to turn off/on
• (static) image (.jpg, .png, .pdf)
23 Jan-Menno Kraak, Web Map Classification, 2001
![Page 24: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/24.jpg)
static .pdf:
can generate .pdf from ArcGIS or QGIS but both…
“flatten” 2 or more layers into one inseparable layer
24
![Page 25: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/25.jpg)
Safe FME translator(s) (Feature Manipulation Engine)…
25
![Page 26: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/26.jpg)
Safe FME (Feature Manipulation Engine) translators OR Adobe Illustrator can produce a .pdf with clickable layers…but… slow to load; pan/zoom limited; limited “click” for further info, etc
26
![Page 27: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/27.jpg)
Web Maps
Types of web maps
• some spatial analysis
• download data / upload data
• zoom, pan, turn off/on, click for more info
• zoom, pan, turn off/on elements/layers
• zoom, pan
• .pdf with elements to turn off/on
• (static) image (.jpg, .png, .pdf)
27 Jan-Menno Kraak, Web Map Classification, 2001
![Page 28: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/28.jpg)
Web Map services
• ArcGIS on-line confusing “credits” system
• Cartodb free for 4 layers: otherwise $149 month
• Click2Map $40.-month
• GeoCommons gone?
• GIS Cloud Was told: “need to upgrade/change subscription”
• MapBox free up to 100mb; otherwise $50 month
• MangoMap free for 3 maps: otherwise $49 month
• QGIS cloud 65 euros/month!
• ScribbleMaps ?
• ZeeMaps free for 5 maps; otherwise $20 month
BUT….with all of the above….
their branding / logo; data on their servers, etc 28
![Page 29: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/29.jpg)
JavaScript libraries
OpenLayers javascript library
• began 2006
• approx. 230,000 lines of code
Leaflet javascript library
• began 2011
• approx. 7000 lines of code
Either work with QGIS
or rather…
QGIS has plug-ins for either of the above
29
![Page 30: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/30.jpg)
How?
• html5
• css
Link to .css from the web:
<link rel="stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
OR
Download to some computer directory and link:
<link rel="stylesheet" href = "SomeLocalComputer/C_drive/leaflet-0.7.3/leaflet.css"/>
• javascript
Link to .js from the web:
<script src = "http://leafletjs.com/dist/leaflet.js"></script>
OR
Download to some computer directory and link:
<script src = "SomeLocalComputer/C_drive/Folder/leaflet.js"></script>
30
![Page 31: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/31.jpg)
css, html5, JavaScript libraries !! Yikes!!
Do you have to learn code?
Not really,
knowing code helps but not entirely necessary…
Really!
Use (a little) code…
but store data on your (local) computer / server
b/c QGIS has plug-ins,
you don’t need to know (much) code
• qgis2leaf April 2014
• qgis2web June 2015
31
![Page 32: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/32.jpg)
Vancouver Island Federal Election results: 2004-2015
32
![Page 33: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/33.jpg)
QGIS: add boundary file
33
![Page 34: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/34.jpg)
add .csv or .xls file
34
![Page 35: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/35.jpg)
added .csv (or .xls) will be joined to boundary file
35
![Page 36: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/36.jpg)
join .csv/.xls to boundary file
36
![Page 37: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/37.jpg)
.csv/.xls joined to boundary file
37
![Page 38: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/38.jpg)
.csv/.xls joined to boundary file
NOTE: “shapefiles” have 3 necessary components
- .shp / .dbf / .shx .dbf’s only allow 10 character column titles -awkward for public web maps
GeoJson (!?) allow unlimited column title characters!
or
web maps fields could be edited in “code”
more later…
38
![Page 39: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/39.jpg)
(NOTE) .dbf’s only allow 10 character column titles
if your .xls has
Median Household Income
it becomes
MedianHous
(in the joined saved shapefile)
not reader friendly!
GeoJson (!?) allow unlimited column title characters! -important for a web map to have friendly readable fields (…can’t edit a GeoJson in QGIS…) 39
![Page 40: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/40.jpg)
(to con’t…) Save (joined .csv/.xls and boundary files) and rename new file
40
![Page 41: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/41.jpg)
remove (now unneeded) files
41
![Page 42: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/42.jpg)
edit attribute table to delete unnecessary columns (for public display)
42
![Page 43: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/43.jpg)
delete “unnecessary” columns (for public display)
43
![Page 44: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/44.jpg)
stylize / symbolize CT data
44
![Page 45: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/45.jpg)
stylize / symbolize CT data
45
![Page 46: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/46.jpg)
stylized and renamed CT file
46
![Page 47: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/47.jpg)
(add and) utilise (selected) leaflet plug-in
47
![Page 48: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/48.jpg)
different javascipt libraries plug-ins
48
![Page 49: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/49.jpg)
qgis2web
49
![Page 50: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/50.jpg)
rename layer to web-friendly title
50
![Page 51: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/51.jpg)
qgis2web Leaflet dialog box choices
51
![Page 52: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/52.jpg)
“finished” web map in a browser! but… note the awkward field titles
52
![Page 53: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/53.jpg)
recall the .csv/.xls with awkward field titles joined to boundary file
53
![Page 54: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/54.jpg)
use .xlsx with “public friendly” column titles to join to boundary file…then…
54
![Page 55: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/55.jpg)
…save as GeoJson…and…
55
![Page 56: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/56.jpg)
GeoJson retains “public friendly” column titles !
56
![Page 57: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/57.jpg)
better friendlier field titles… but now…need to “serve up” the map…
57
![Page 58: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/58.jpg)
need to “serve up” the map…
the map worked in your browser b/c the files were saved and accessed there…
58
![Page 59: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/59.jpg)
1 of the files is the .html
other files are:
…etc
59
![Page 60: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/60.jpg)
use Notepad++ to open index.html
60
![Page 61: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/61.jpg)
index.html open in Notepad++
61
![Page 62: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/62.jpg)
change locations of the files from
to
62
![Page 64: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/64.jpg)
recall the .csv/.xls with awkward field titles joined to boundary file…
64
![Page 65: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/65.jpg)
and .xlsx with “full public” column titles…
65
![Page 66: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/66.jpg)
and saved as GeoJson…well…
66
![Page 67: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/67.jpg)
make changes in the code…
• change pop-up field titles to friendly terms
• change legend terms
67
![Page 68: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/68.jpg)
remember GeoJson(s)? .shp versus…
GeoJson (!)
68
![Page 69: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/69.jpg)
How?
• html5
• css
Link to .css from the web:
<link rel="stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
OR
Download to some computer directory and link:
<link rel="stylesheet" href = "SomeLocalComputer/C_drive/leaflet-0.7.3/leaflet.css"/>
• javascript
Link to .js from the web:
<script src = "http://leafletjs.com/dist/leaflet.js"></script>
<script src = "https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js" ></script>
OR
Download to some computer directory and link:
<script src = "SomeLocalComputer/C_drive/Folder/leaflet.js"></script>
69
![Page 70: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/70.jpg)
30+ Basemap(s)
70
var Stamen_Watercolor = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', { attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
![Page 71: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/71.jpg)
other changes and maps possible with some code…
71
![Page 72: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/72.jpg)
other changes and maps possible with some code…
72
![Page 73: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/73.jpg)
Considerations
• utilize (open-source) JavaScript libraries to create web maps with custom features
(OR
• utilize web map providers with standard features)
• host and serve our maps ourselves
OR
• upload “our” maps to US server or cloud
• need to build for mouse and touch screens
73
![Page 74: Utilizing free open source tools to create interactive web maps in ...€¦ · •Cartodb free for 4 layers: otherwise $149 month •Click2Map ... css, html5, JavaScript libraries](https://reader034.fdocuments.net/reader034/viewer/2022042808/5f8a8fecd7c6a9179d63d996/html5/thumbnails/74.jpg)
Data Libraries have amazing resources…
• Can web maps highlight our data collections?
• Web maps: “hot like chicken s**t”
• Web maps: necessary geovisualisations in today’s digital world?
74