Open keshav234156 opened 4 years ago
As mentioned https://publiclab.org/wiki/inline-maps I think embedding it in tag followed by a <script> tag would be the Best. I have done a similar rough implementation here <a rel="noreferrer nofollow" target="_blank" href="https://drive.google.com/file/d/1fWQVquIX-zPozz6fR4TTOIVbmFhPmQAZ/view">https://drive.google.com/file/d/1fWQVquIX-zPozz6fR4TTOIVbmFhPmQAZ/view</a> where different font size and color are changed by embedding text inside the <span> tag and passing color and font-size attributes inside the span. Similarly, we can embed maps inside <iframe> tag and then passing attributes like height and width.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/keshav234156"><img src="https://avatars.githubusercontent.com/u/45951376?v=4" />keshav234156</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@jywarren Can you please give me a rough idea of how we can implement Maps with preset layers, Zoom level.</p> <p>Because in the above example you have hosted a map on the Github page for the Unearthing layer. Do we need host Github page for every layer or is there another way around?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/keshav234156"><img src="https://avatars.githubusercontent.com/u/45951376?v=4" />keshav234156</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Also, how will we implement like Zoom level, Tag-filtered maps?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/developer22-university"><img src="https://avatars.githubusercontent.com/u/51835554?v=4" />developer22-university</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>HI, I WANT TO ASK ARE U APPLYING TO OUTREACHY @keshav234156 </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jywarren"><img src="https://avatars.githubusercontent.com/u/24359?v=4" />jywarren</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>So, on <a href="https://publiclab.org/wiki/inline-maps">https://publiclab.org/wiki/inline-maps</a> it shows that there are Markdown extensions that we call "inline grids" on plots2, that look like: <code>[map:_______]</code> -- these get auto-converted along with Markdown into the interactive features. So, really what we need is a UI for generating these and inserting these strings. For a simple example, you can look at the button/popup for generating tables; it's a submodule of the Rich Text module here: <a href="https://github.com/publiclab/PublicLab.Editor/blob/master/src/modules/PublicLab.RichTextModule.Table.js">https://github.com/publiclab/PublicLab.Editor/blob/master/src/modules/PublicLab.RichTextModule.Table.js</a></p> <p>You click the button, choose height and width, and then it inserts the string for a Markdown table. In our case, we'd have a more complex UI to show the types of inline features we want, and then you'd click OK and it'd insert the corresponding string in the format specified in /inline-maps, that is, <code>[map:________]</code> where it'd substitute in the parameters that were selected in the form. </p> <p>This is a bit convoluted i know but think of it as a "helper" which helps you write Markdown, essentially. The part for displaying the maps is already done and works, it's just hard for non-programmers to know the exact formatting and parameters for the inline grid "markdown extensions" so we are helping people step by step configure this stuff by choosing a map region, etc.</p> <p>I'd probably start by just having people input the values in <code><input></code>s and get that working before doing a more complex UI which could include a draggable map. That way you could tackle the problem in separate modular parts, you know? Likewise, just focus on one basic type of inline content first, and build on that to add additional types. </p> <p>Thanks!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/keshav234156"><img src="https://avatars.githubusercontent.com/u/45951376?v=4" />keshav234156</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@shreyaa-s @NitinBhasneria @Shulammite-Aso I have made a wireframe to what @jywarren said. We can refine it more <img src="https://user-images.githubusercontent.com/45951376/81275627-91328c00-906f-11ea-964f-aa12e76ca808.png" alt="Screenshot_from_2020-03-26_00-13-16" /></p> <p>For maps</p> <p><img src="https://user-images.githubusercontent.com/45951376/81275635-9263b900-906f-11ea-8d97-0f29a636e982.png" alt="Screenshot_from_2020-03-26_00-56-51" /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jywarren"><img src="https://avatars.githubusercontent.com/u/24359?v=4" />jywarren</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>😄 awesome. and can draw on mockups from peoples' proposals as well - can someone copy those into here? Eventually (but not too fast!) you could move beyond wireframes to more interactive mockups using a tool like this: <a href="https://www.layoutit.com/build">https://www.layoutit.com/build</a></p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
As mentioned https://publiclab.org/wiki/inline-maps I think embedding it in