Git Product home page Git Product logo

sinangoe-webmap's Introduction

interactive-maps

Build interactive webmaps using Mapbox and a content management system.

How does this work?

This is a content management system (CMS) for attaching rich text to create an interactive story alongside a map. It is deployed to Netlify as a static website. It also will continue to work offline, as it saves the map tiles and content to your device browser storage as you scroll. This is heavily drawn from the Waorani resistance campaign, 'Our Rainforest is Not For Sale'.

The map is renderered based upon a given MapBox map style and the visible layers chosen in the CMS at the opacity picked at that zoom level in Mapbox. See the below diagram for a quick overview of how the relevant information is pulled together to create the static map.

diagram.png

Troubleshooting

  • Layer failures. A layer could fail to fade in or out or appear altogether. This could be caused by a miryad of reasons. The map will still function with the error, but the layers that fail won't look as originally intended.

    • Can't get layer visibility. The CMS allows you to specify which layers are visible at a particular zoom level of the story. We try to be smart and fetch the layer opacity from mapbox. If we can't get the layer opacity, the layer may not fade in or out as intended.
    • Layer is new or the name changed in Mapbox. Layers aren't known automatically after Mapbox style is updated. The CMS won't know about the new layers that are available unless you tell it to update. The Section in the content management system needs to be updated after the Mapbox style is updated. You can do this by opening up a section in the CMS, and adding the new layer (or the layer with the changed name) to the 'visible layers' box.
    • Debugging. There should be error messages in the console in case a layer fails to fade in or out; although we may not be able to detect exactly the reason why a layer failed to render, it can give some helpful context. These errors will be shown in the Developer Console (Cmd+Shift+I).
  • Layer transition smoothness. Before publishing, find which layers should be hidden between transitions and add them to the hidden layers in src/map_transition.js. This is a delicate choice, because if you hide too many layers, it'll look very rigid and not very smooth visually when scrolling. However, if you hide too few, it'll be very slow overall and hard to view on slow internet connection and older computers.

Development

When editing the admin interface, for hot reloading:

npm run start:admin

When editing the map interface:

npm run start:map

For deploying

npm run build
http-server dist

License

MIT

sinangoe-webmap's People

Contributors

aliya-ryan avatar okdistribute avatar datland-irc-bot avatar gmaclennan avatar evanhahn avatar

Stargazers

jiangplus avatar Andrew Chou avatar

Watchers

 avatar  avatar James Cloos avatar  avatar  avatar Rudo Kemper avatar  avatar

sinangoe-webmap's Issues

mapbox and dd logo placement

Currently on my mac screen when viewing the preview of the map, the Dd and Mapbox logos appear kind of two thirds down the screen on the RHS. Is it possible to set it so that whatever the screen size they always appear in the bottom right hand corner, or perhaps along the bottom of the screen - close to the litle "i" information button?

Image below is of how it currently appears on my laptop screen
Screenshot 2020-09-14 at 10 59 01

Map preview not updating with new published sections

The map now has 14 chapters / sections. However only the first 6 display - these are the same 6 which displayed when I started work on it yesterday. I have since, yesterday and today, added another 8 sections (with headers and all the. map data, no other content text of photos) but these do not appear in the preview, although they appear as published everywhere on the CMS.

Screenshot 2020-09-08 at 13 29 28

am looking at the preview here: https://sinangoe-map.ddem.us/

Header (in tab) of map is wrong

The map still has the 'holder' header in the tab right at the top which was taken from the Wao map which this was copied from (Our Rainforest is not for sale).

Is there somewhere in the CMS where this can be set - or how is it changed?

For now can it be changed to "Nuestro Territorio es Nuestra Vida" so that it makes more sense when we consult on it?

Screenshot 2020-09-08 at 13 38 19

Make Long and Lat fields non-scrolling

Currently on my computer the fields where you enter the long and lat coordinates change very easily because they go up and down with the scrollbar as I move my mouse - it is easy to mistakenly edit or change these when just scrolling down the page if the mouse happens to fall over this field. If it were possible to disable this so that the figures in here have to be manually entered that would safeguard against this problem.

Layers appear on map which are not named in "Visible Map Layer" box

The map which appears in the preview view seems to show everything which is visible on the mapbox map at that zoom level (depending upon how the computer displays it with the bounds that are set). So this results in some layers appearing on the preview map even if they are not mentioned in the Visible Map Layer box in the CMS.

See image below where the thin black lines are pipelines, which I have just added to the Mapbox map as a new layer. They are not mentioned in the CMS box, however they appear on the preview.

Screenshot 2020-04-29 at 11 48 53

Screenshot 2020-04-29 at 11 49 03

Screenshot 2020-04-29 at 11 49 41

I actually do want them to appear, but was not able to choose them as the CMS box had not yet refreshed to include them as an option - so this particular instance of this bug isn't a problem, and I will add them as a layer when the system refreshes, however it seems to indicate a more general problem, as according to how I understand the CMS, this layer ought not appear unless named.

When map first opens, all the published layers appear

When I first open the mapstory, and it appears with the text of first chapter, the map which appears is located correctly, but all of the nontransparent, visible, published layers appear on the map, when it should only be showing the layers specified in the CMS.

If you scroll down the map the other sections appear correctly, and if you go back up to the top of the story again then just the correct layers seem to appear, so it is apparently something to do with the very first load.

No Preview button in CMS

I can not find a preview button in the CMS page where you do all the adding of content and maps etc. I've looked on all the pages.

I have a link to the map itself (sinangoe-map.ddem.us) - so I am able to look at this, and I guess this should be the same as the preview, so it isn't an urgent issue to fix. However for ease of use of the CMS in future it would be good to have a preview button somewhere prominent.

Not priority issue - the bugs with the map are more important to fix

layer opacity should use that set in the mapbox style

Right now, if a layer is on, it uses opacity 1. Under the paint object, it should instead be whatever mapbox says, which is one of the following patterns:

{"paint":{"background-color":"hsl(202, 93%, 74%)"}}
{"paint":{"raster-opacity":0.41}}
{"fill-opacity":{"base":1,"stops":[[6,1],[6.5,1],[7,0]]}}

etc..

Map Section Order does not match order where you can set order

The order in which the map sections appear in the screen where you can edit the text of the sections does not match the order in the screen where you can change their order. And this results in the order in the previewed map not being correct (this seems to follow the order on the Map Sections page, not the Section Order page).

See images below.

Screenshot 2020-04-29 at 11 07 09

Screenshot 2020-04-29 at 11 07 22

The order on the Map Sections page seems to be random and changes without me asking it to. eg. I created a new section, at the end of the list, but after publishing it and going in and out, the Map Sections page then has put this page in the middle of the list, whilst it is still at the end of the Section Order page.

Preview not updating / Map not working on scroll

I don't know if this is an issue with my browser storing history or something, but the map preview does not seem to update with the new content (new chapters I have added) and nor does it change (zoom in and out or move around) when I move between the chapters.

When I first opened it this morning it was doing the zoom and move - but this has now stopped.

This makes it very hard to work on the maps as I can not preview each chapter's map and check the draft is OK. See zipped video below (this also shows the layer problem from issue #12)
bug in CMS scrolling1.mov.zip

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.