The Weekly #3

Published by jdtalley on

Welcome to The Weekly, my update on what I have been working on this week.

Mapbox Styler

This week I had a buddy come to me with a new idea for a project. He recently had to work with Mapbox and was having trouble with the workflow of creating new map layers.

Styling the layers required editing code and refreshing a page to see the changes. The idea was to create a tool to make styling layers easier while also allowing the styles to be exported to JSON. The problem I want to focus on in this week’s post is refreshing the page to see changes.

The First Form

To start, I pulled what my friend had already started. The page displayed a map and a form. When you submit the form, the point on the map would update.

Point color and radius changed
$('#changePoint').on("click", function(){
        var inputRadius = parseInt($('#pointRadius').val());
        var inputColor = $('#pointColor').val();

        var pointRadius = 10;
        var pointColor = '#000';

        if ( inputRadius != null && inputRadius > 0){
            pointRadius = inputRadius;
        }
        pointColor = inputColor;
        map.removeLayer("pointLayer");
        map.addLayer({
            'id': 'pointLayer',
            'type': 'circle',
            'source': 'points',
            'paint': {
                'circle-radius': pointRadius,
                'circle-color': pointColor
            }
        });
    });

My first step was to add event listeners to the inputs instead of just the submit button. Here is an example of the function for the radius input.

pointRadiusButton.addEventListener('change', (e) => {
    pointRadius = parseInt(e.target.value);

    map.removeLayer("newPointLayer");

    map.addLayer({
        'id': 'newPointLayer',
        'type': 'circle',
        'source': 'points',
        'paint': {
            'circle-radius': pointRadius,
            'circle-color': pointColor
        }
    });
})

The map now updates based on the values selected in the form! From there, I decided to rehash the form a bit to allow for more layer types in the future. I added a new button and hid the input fields until it was pressed. The point form was modified to save when complete and cancel to reverse changes.

Main vs. Point form

There is still a lot of work to do on this project. I look forward to showing off more in the future.

Twitch Streaming

This past week I decided to start streaming on Twitch. I have been interested in gaming videos/streams for a long time. Editing these days can be quite the time sink, so I decided to have a go with streaming instead.

You can find me at https://www.twitch.tv/nl_dakota Mondays and Wednesdays at 7PM EST. I may add some additional times for streaming non-gaming things in the future. I will leave with a recent highlight of me being tired while playing Rocket League with a friend.

Thanks for reading!


0 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.