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

[Shinko to Kuma]

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:

$.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:

Spoiler: Circles

{
        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,
    }

Spoiler: Lines

{
        x1: 556,
        y1: 347,
        x2: 558,
        y2: 343,
        styling: {
            main: {
                "strokeStyle": "red",
                "lineWidth": 5
            },
            mini: {
                "strokeStyle": "red",
                "lineWidth": 1
            }
        },
        drawOnMini: true,
        drawOnMap: true,
    }

Spoiler: Icons

{
        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,
    }

Spoiler: Text

{
            text: "Noble area us",
            x: 547,
            y: 343,
            font: "30px Arial",
            miniFont: "10px Arial",
            color: "red",
            drawOnMap: true,
            drawOnMini: true,
        }

Spoiler: Polygon

{
            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:

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.

MapSdk.mapOverlay.reload();

Example of the map/minimap with the above example codes:

Spoiler

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

 

[RedAlert]

Approved and nice work

 

[Shinko to Kuma]

Updated to add polygons, and text on the minimap:

Spoiler: Screenshot

Spoiler: Polygon

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]

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]

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:

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:

MapSdk.mapOverlay.reload();

 

[Ruhepuls180]

can you maybe make a video how to use it doesn't open for me

 

[RedAlert]

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.