Using JavaScript within HTML in a post

On in the subreddit r/dataisbeautiful I found this awesome post of u/MournerV. He visualized the orientation of streets for any city you are interested in. I want to work with the given code and learn how to build awesome stuff like this too. He furthermore wrote about the whole procedure on his blog and uploaded the code to Github. The license is quoted at the end of this post.

I have never worked with JavaScript and at first I wanted to figure out how to get the code working on WordPress. That is what this post is about.

Since the code consists only of one html and one JavaScript file I though this might be a good point to start. I uploaded the index.js file to /var/www/wordpress/wp-content/themes/twentysixteen/js/.

In the html file, I set the path to the corresponding location. I.e.,

<script src="visroads.js"></script>
<script src="http://www.camminady.org/wp-content/themes/twentysixteen/js/visroads.js"></script>
</body>

The script is called visroads.js since I renamed it. Now you can simply upload the html file via the “Add Media” button to WordPress. That’s it, the result can be seen here.

Once more: I do not take credit for this work! Every line of code was written by Vladimir Agafonkin with this source. If you want to use the code on your own, also make sure to get an access token from mapbox.com. License:

ISC License

Copyright (c) 2018, Mapbox

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

 

 

Leave a Reply