Assignment 2: Sensory Digital Map

[rasagy]

This ticket is for all discussions, doubts and inspiration for this assignment started in #20.

Feel free to ask questions, share screenshots & links of your progress here.

[ananth22by7]

Smell Link to check in on progress any time https://api.mapbox.com/styles/v1/jerryjoseph208/cixlo9vlw00132ro0m4jghni5.html?title=true&access_token=pk.eyJ1IjoiamVycnlqb3NlcGgyMDgiLCJhIjoiY2l4bGUwZmdxMDA5eDMzbW9hc3R4Z29qOCJ9.iw9f-lfTh3YcALjzjvX5Ww#18.3/13.034790/77.534232/0

[Vvipasha]

Vision

the following was made using the mapbox online editor. However, I wasn't able to get the same result using mapbox studio (since online editor projects will become read only as of 31st Jan).

Is there a quick way to migrate to studio (keeping markers and image files in pop up as it is ) using geojson or kml files.??

[planemad]

@Vvipasha the online editor is no longer maintained and should not be used. Unfortunately there is no way to migrate from this to Studio as they are incompatible technologies.

[abhi191]

Playing with the color schemes and point plots.

[aritrosaha]

@planemad Is there a color gradient tool to apply on an area or a line in the mapbox studio?

[planemad]

@aritrosaha gradient colors are not yet supported in Studio

[planemad]

@mapschool/infdpg15 please share the progress and blockers you are facing so @rasagy and I can help out. We're looking forward to some great walkthroughs.

[Amruthavijaykabadi]

Taste

Aritro Saha, Amrutha Working on the dimensions: type, source, intensity

[pratyaksha01]

I TOUCH TO CONNECT

Lines representing dimensions- material, surface, sunlight, comfort WIP- experience, safety

https://api.mapbox.com/styles/v1/pratyaksha/cixq4a0xq00712rphumle7ryu.html?fresh=true&title=true&access_token=pk.eyJ1IjoicHJhdHlha3NoYSIsImEiOiJjaW0wNmhsY3kwOGx1dTlrcjR0ZHJldWduIn0.LeINIf9Dh-dozopC65rcNQ#16.16/13.03659/77.53356

[planemad]

@Amruthavijaykabadi looking very interesting. It helpful to write a text legend when planning the style to help you think in terms of how to communicate the visual grammar.

@pratyaksha01 Do share a text legend of what the line styles and color represent

[jerryjoseph208]

Smell

Jerry,Ananth, Deepti

Github Pages Link

[planemad]

@jerryjoseph208 @ananth22by7 @diptigarima this is looking great! Think about how you can guide the journey for a user, how does one know where to start?

You can also see how you can bring the positive and negative attributes of the surroundings using subtle colors on the basemap.

[jerryjoseph208]

@planemad We are looking into how the user can be navigated through the journey.

We had already tried to bring the positive and negative attributes of the surroundings through the dotted lines on the path. Do let us know if the same is not working.

Updated the earlier version with legend and intensity details on hover.

https://jerryjoseph208.github.io/smells-of-peenya/

[Vvipasha]

Vision

Q : I am unable to upload an image into the popup message. Tried adding the link as a key value pair while styling and then fetching the value via html file and supplying the url in sethtml() as below ->

var altT = feature.properties.location; var url1 = feature.properties.url; popup.setLngLat(feature.geometry.coordinates) .setHTML(feature.properties.source + " <br> <b> <center> <h2>" + feature.properties.location + "<img src = url1>") .addTo(map); ps : while debugging, the console shows fetching the correct url under the variable url1

[Vvipasha]

VISION

Tried experimenting with icons having actual images along with description in the popup.

[ananth22by7]

@planemad - (For the smell assignment) There's an issue when you zoom in/out - the areas with grey dots show only in a certain range of zoom - at least for us. Is it the same for you guys too?

---

Also the grey dotted polygon for an area (the area in front of Platinum City Club House) isn't showing up at all, which is strange because all the areas were showing fine before publishing.

[aritrosaha]

Taste

Aritro, Amrutheshwari

Hi @planemad @rasagy , We are currently working on the text legend. Meanwhile we introduced icons for different types of TASTES. Along with colors(shades & tints) for the intensity of that type of taste.

https://api.mapbox.com/styles/v1/amruthavkabadi/cixq5c86r007d2rphsc2xeesq.html?fresh=true&title=true&access_token=pk.eyJ1IjoiYW1ydXRoYXZrYWJhZGkiLCJhIjoiY2l1ZXRoZDU3MDBmOTJ0bXplbWkwd2hoayJ9.ufR0k9N9m6oRPNltjubxCg#18.3/13.03566/77.53412/-68.4/60

[planemad]

@Vvipasha can you share the value for a sample url1? The html is correct, its likely that the location to the image is incorrect.

[planemad]

@ananth22by7 not seeing any issues with the grey dot patterns, it shows up fine on all zoom levels.

Not sure of the missing piece. Everything else shows up fine, what was done differently for that polygon?

[planemad]

@aritrosaha @Amruthavijaykabadi looking good.

This type of line styling makes it look like you took three different routes. You can see if different line attributes like widths and blurs can improve the visualization.

[rasagy]

Loving the explorations!

Want to share a quick tip: You’ll notice that even though places like NID & Platinum city are mapped in OSM, they don’t show up as labels in your map. That’s because the poi_label layer in this map style only filters a small set of points to show.

You can change this by going to the poi_label layer in the style, opening Select Data tab, and removing the filters:

You can always add new layers instead of editing the poi_label layer, and design the specific labels for apartments & rest of the PoI to get something like below:

I’m using the following filters for the two layers:

[rasagy]

Also the grey dotted polygon for an area (the area in front of Platinum City Club House) isn't showing up at all, which is strange because all the areas were showing fine before publishing.

@ananth22by7 You might have missed the properties for this part of the road, or might have missed adding this part of the road. Can you cross check in the Dataset Editor once?

@Vvipasha Try catching up with @jerryjoseph208 & @ananth22by7 and get them to host your project on Github pages like they have done. Then we can help out with the error if you’re still getting it, although from the code you pasted, it seems to be because the space ( ) in the code shouldn’t be there:

popup.setLngLat(feature.geometry.coordinates) .setHTML(feature.properties.source +…

[ananth22by7]

@planemad @rasagy Yep, the zoom issue is gone for us too. Polygon still missing though. I don't recall doing anything different for that polygon but I'll check once again.

[planemad]

@mapschool/infdpg15 please start posting your final submissions today. Meanwhile @rasagy and I will outline next actions for the group assignment #22

[planemad]

@mapschool/infdpg15

Assignment check-in

• Date: 12 January
• Time: 2-2:30pm
• Google Hangout

The check-in is to help groups with feedback and help with any blockers for the final submission today. Please share the code online prior to the hangout to help troubleshoot problems.

[jibs23labs]

Touch - Sensory Experience Mapping

---

Exploration

Version_1a https://rawgit.com/jibs23labs/Mapbox/56f5c4aab681e29679aa9ca0a40d2f50eb931d55/test.html

Updates - WIP

1. Visuals on hover.
2. Revising material visual pattern.
3. Combining V1 and V1a.
4. Legends on Page.
5. Redefining visual grammer.

[jerryjoseph208]

Smell

Ananth, Deepti, Jerry

Github Pages Map: Smells Of Peenya

Code Link: https://github.com/jerryjoseph208/smells-of-peenya/blob/master/index.html

Style URL

[rasagy]

@ananth22by7 @jerryjoseph208 Have a look at this example of flying to different locations with scrolling: https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/

[rasagy]

@Vvipasha Have a look at this example if you haven’t already for implementing this idea you shared earlier:

Try working with your batchmates to debug issues or share your code so we can help out. :)

[rasagy]

Here’s an example for creating hover on your elements, however it’s slightly javascript heavy: https://www.mapbox.com/mapbox-gl-js/example/hover-styles/

Also have a look at other examples in the User Interaction section, like this example to restrict panning to an area, filter symbols by toggling buttons etc.

[rasagy]

Here’s how you can get the arrow along a continuous line added in Dataset Editor:

Or footsteps!

[ananth22by7]

@rasagy Hmm, we had tried that approach with one of the default icons but icons weren't always aligned with the direction of the line, so we didn't proceed. We'll try it again now.

Footsteps is a good idea!

[rasagy]

@Amruthavijaykabadi @aritrosaha Here’s one more thing you can play with when you’re making the parallel lines: Change the dashes to go from long to short. See if this approach helps!

[rasagy]

Taking the discussion of the Group project to #22.

[Vvipasha]

@rasagy Hey can you share the code snippet to read a geojson file into a variable in order to access the coordinates for each point on map. TIA

[rasagy]

@Vvipasha The example I shared does exactly that. Are you getting stuck somewhere? Can you upload your code on github and share some screenshots/errors so we get a better idea?

Here’s roughly what that code does:

--- Takes the geojson file and saves it in the variable `geojson`: ``` var geojson = { "type": "FeatureCollection", "features": [ { ``` Then loops through each of the feature (point-based markers, in this case): ``` // add markers to map geojson.features.forEach(function(marker) { ``` Then does something (creates a `

`) with the properties of each feature: ``` // create a DOM element for the marker var el = document.createElement('div'); el.className = 'marker'; el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)'; ``` Then adds that `

` as a marker on the map with the latlong property of the geojson for the marker: ``` // add marker to map new mapboxgl.Marker(el, {offset: [-marker.properties.iconSize[0] / 2, -marker.properties.iconSize[1] / 2]}) .setLngLat(**marker.geometry.coordinates**) .addTo(map); ```

[Vvipasha]

@rasagy i see in the code , the geojson is written in the same html file. Instead, I am trying to access the features.json file stored in the same folder location and then store the value into the variable. So if you could let me know how do i access the feature.json file into my index.html file and storing in the similar way as mentioned above

[rasagy]

@Vvipasha Understood. An easier hack would be to open the geojson file and copy paste the json in your own code, like the example does, if the geojson won’t change/doesn’t need to be in a separate file.

If not, then this page explains different ways to access a geojson file: By running a local server, or by converting it into a .js file by making a small edit. Hope this works if you want to refer to the file.

[planemad]

@Vvipasha like @rasagy mentions you cannot access external JS files without using a server. Its as simple as running the command python -m SimpleHTTPServer in your terminal at the folder location, and opening the server address in the browser.

A simple tutorial to get you started with a simple web development environment and share your code on Github: https://gist.github.com/planemad/716fd648564ca083921a

[Vvipasha]

@rasagy @planemad .. Thanks for the suggestion and links.

For the update , made few changes as follows -

1. Made the land use features like parks and buildings a little prominent.
2. Added icons for the objects.
3. Displaying color to highlight the sense of sight as background for the icons
4. Provided the journey route.
5. Displaying pop ups on hover with : a object name b. location c. source d. image

Next Item actions :

1. working on having custom marker icons.
2. Looking to incorporate shapes
3. Also looking to incorporate crowd density for different points a. large gatherings b. small gatherings c. very less or no gathering

https://api.mapbox.com/styles/v1/vipasha/cixuqov2r007m2so6jxaq4nji.html?fresh=true&title=true&access_token=pk.eyJ1IjoidmlwYXNoYSIsImEiOiJjaW1memNyNWgwMXVzdmNtNmQyemNqa3o1In0.J2DseJ4fjLUYStQrrV0fKQ#19.12/13.03468/77.53447/-70

[

](url)

Ps : would commit the code today before lunch time.

[rasagy]

@Vvipasha Awesome, looking forward to seeing what you finally come up with!

[planemad]

@Vvipasha this is great. The route labels are nice, wonder if it could be made more expressive, rather than route numbers which does not tell much about the route.

[Amruthavijaykabadi]

Our Journey Through Taste

Aritro, Amrutheshwari

Our visualisation:

https://amruthavijaykabadi.github.io/taste-journey/

Code: https://github.com/Amruthavijaykabadi/taste-journey/blob/master/index.html

Exploration:

https://api.mapbox.com/styles/v1/amruthavkabadi/cixu61r3v00572so6w7g05xib.html?fresh=true&title=true&access_token=pk.eyJ1IjoiYW1ydXRoYXZrYWJhZGkiLCJhIjoiY2l1ZXRoZDU3MDBmOTJ0bXplbWkwd2hoayJ9.ufR0k9N9m6oRPNltjubxCg#16.2/13.03686/77.53257/-1

[abhi191]

Output - https://abhi191.github.io/NID-Sounds/ Code - https://github.com/abhi191/NID-Sounds/blob/master/index.html

[Vvipasha]

Output - https://vvipasha.github.io/VisionNID/ Code - https://github.com/Vvipasha/VisionNID/blob/master/index.html