Map/Coord Map SDK - Tool to assist scripters to draw on the map

Shinko to Kuma

Still Going Strong
Reaction score
776
Author
Sass
Contributors
Shinko to Kuma
Quickbar Entry
javascript: $.getScript("https://shinko-to-kuma.com/scripts/mapSdk.js");
Public?
Public
I wrote this SDK to help scripters to easily visualise things on the map/minimap. I plan on updating this in the future with extra features, but the fundamentals are this:
The SDK is selfcontained in an object called MapSdk

First, you want to get the SDK using this:

JavaScript:
$.getScript("https://shinko-to-kuma.com/scripts/mapSdk.js")

The SDK helps to draw the following things on the map with examples how to store them:

JavaScript:
{
        x: 556,
        y: 347,
        radius: 5,
        styling: {
            main: {
                "strokeStyle": "red",
                "lineWidth": 5,
                "fillStyle": "rgba(255, 255, 255, 0.5)"
            },
            mini: {
                "strokeStyle": "red",
                "lineWidth": 2,
                "fillStyle": "rgba(255, 255, 255, 0.5)"
            }
        },
        drawOnMini: true,
        drawOnMap: true,
        markCircleOrigin: true,
    }
JavaScript:
{
        x1: 556,
        y1: 347,
        x2: 558,
        y2: 343,
        styling: {
            main: {
                "strokeStyle": "red",
                "lineWidth": 5
            },
            mini: {
                "strokeStyle": "red",
                "lineWidth": 1
            }
        },
        drawOnMini: true,
        drawOnMap: true,
    }
JavaScript:
{
        img: new Image(), // REQUIRED TO SET THE SRC OF THE IMAGE WHEN ASSIGNING THIS TO THE OBJECT!
        x: 556,
        y: 347,
        drawOnMini: true,
        drawOnMap: true,
        mapSize: 20,
        miniSize: 5,
    }
JavaScript:
{
            text: "Noble area us",
            x: 547,
            y: 343,
            font: "30px Arial",
            miniFont: "10px Arial",
            color: "red",
            drawOnMap: true,
            drawOnMini: true,
        }
JavaScript:
{
            coords: [
                {
                    x: 541.5,
                    y: 332.5,
                },
                {
                    x: 541.5,
                    y: 355.5,
                },
                {
                    x: 552.5,
                    y: 355.5,
                },
                {
                    x: 552.5,
                    y: 329.5
                }
            ],
            styling: {
                main: {
                    "strokeStyle": "red",
                    "lineWidth": 5,
                    "fillStyle": "rgba(200, 50, 50,0.3)",
                },
                mini: {
                    "strokeStyle": "red",
                    "lineWidth": 2,
                    "fillStyle": "rgba(200,50,50,0.3)"
                }
            },
            drawOnMini: true,
            drawOnMap: true,
        }

An example on how to add an element to the map, would be like this:
JavaScript:
MapSdk.circles.push({
        x: 556,
        y: 347,
        radius: 5,
        styling: {
            main: {
                "strokeStyle": "red",
                "lineWidth": 5,
                "fillStyle": "rgba(255, 255, 255, 0.5)"
            },
            mini: {
                "strokeStyle": "red",
                "lineWidth": 2,
                "fillStyle": "rgba(255, 255, 255, 0.5)"
            }
        },
        drawOnMini: true,
        drawOnMap: true,
        markCircleOrigin: true
    });

After you did your final drawing additions, you want to reload the overlay. The script handles only redrawing the sectors of the map that are needed.
JavaScript:
MapSdk.mapOverlay.reload();

Example of the map/minimap with the above example codes:
JthxK.png

Note: I didn't obfuscate the source so people can learn from it, and while I rewrote most of the code from scratch, there are fragments in this sdk that were written in the past by various sources, like Sophie and I have no clue where she got it or wrote it herself. However, I'd like people to not make blind clones of this SDK, and instead give feedback on it so I can improve on it for everyone :)
 
Changelog
12/07/2022 - Fixed a bug that use the styling properly for one of the drawing modes, added polygon drawing
Last edited:
Upvote 3

RedAlert

Senior In-Game Staff
Tribal Wars Team
Senior
Team
Script Moderator
Reaction score
619
Approved and nice work :)
 

Shinko to Kuma

Still Going Strong
Reaction score
776
Updated to add polygons, and text on the minimap:

JtuYJ.png

JavaScript:
MapSdk.polygons.push(
{
            coords: [{
                    x: 541.5,
                    y: 332.5,
                },
                {
                    x: 541.5,
                    y: 355.5,
                },
                {
                    x: 552.5,
                    y: 355.5,
                },
                {
                    x: 552.5,
                    y: 329.5
                }
            ],
            styling: {
                main: {
                    "strokeStyle": "red",
                    "lineWidth": 5,
                    "fillStyle": "rgba(200, 50, 50,0.3)",
                },
                mini: {
                    "strokeStyle": "red",
                    "lineWidth": 2,
                    "fillStyle": "rgba(200,50,50,0.3)"
                }
            },
            drawOnMini: true,
            drawOnMap: true,
        }

);
You can add as many coordinates as you want to the polygon, just make sure you add them in an order that makes sense from a directional point of view rather then randomly
 

szymuspp

New Member
Reaction score
0
Hi,
Would you mind telling me how to use the script? I know you descriped it in your first post but I'm struggling with it and can't make it work.
 

Shinko to Kuma

Still Going Strong
Reaction score
776
Hi,
Would you mind telling me how to use the script? I know you descriped it in your first post but I'm struggling with it and can't make it work.
MapSDK is an object that contains all it's own functions and storage for the drawings.
Basically you can use any of the examples above by pushing the expected format to the object. You can also add additional keys to target the data later to for example remove them individually. An example:

JavaScript:
MapSdk.circles.push({
        your_own_id_if_you_need_this: 1, // this line can be removed, it's just an example
        x: 556,
        y: 347,
        radius: 5,
        styling: {
            main: {
                "strokeStyle": "red",
                "lineWidth": 5,
                "fillStyle": "rgba(255, 255, 255, 0.5)"
            },
            mini: {
                "strokeStyle": "red",
                "lineWidth": 2,
                "fillStyle": "rgba(255, 255, 255, 0.5)"
            }
        },
        drawOnMini: true,
        drawOnMap: true,
        markCircleOrigin: true
    });
After adding(or removing) the desired data, you need to trigger a redraw of the map by using this command:

JavaScript:
MapSdk.mapOverlay.reload();
 

RedAlert

Senior In-Game Staff
Tribal Wars Team
Senior
Team
Script Moderator
Reaction score
619
können sie vielleicht ein video machen, wie man es benutzt bei mir öffnet sich nicht
In English please. This is not the DE market, we are on the International market. The German language is not supported here.
 
Top