Make Visualization [back+front]

[worthant]

• [x] use Yandex maps API
• [x] cities == placemarks with custom icons
• [x] get ownership Map from the server (new request and response)
• [x] colors of icons - based on the ownership [backend]
• [ ] design .svg icon for city and handle color changing
• [ ] coordinates - in longtitude and latitude
• [x] cities should be clickable and editable based on the ownership (remove_by_id)
• [x] size of icon - based on the population
• [x] animation of the icon - when navigate to it

[worthant]

Guys, that is very sad, but unfortunately, webEngine do not support all the features, that i need to make this work. Placemarks from Yandex API just doesn't load and a lot of things fall apart.

Maybe, i will do the web stuff after that in 9th lab. For now, i will try to bypass this using custom icons, maybe it will still work.

1) how it shoud've look like (in the browser) 2) how i bypassed it because icons aren't showing up in webEngine

[worthant]

Okay, i figured it out.

• firstly, i will download many many .svg icons for building (https://icons8.com/icons/set/building)
• secondly, i will access them, instead of changing the color
• we are basically done)

Generate icon name:

private String generateRandomIconName() {
    int iconNumber = new Random().nextInt(100) + 1;
    return "building_icon_" + iconNumber + ".svg";
}

Ans then, pass generated icon name to the js script:

function addCity(name, latitude, longitude, owner, iconName) {
    var placemark = new ymaps.Placemark([latitude, longitude], {
        hintContent: name,
        balloonContent: 'Owner: ' + owner
    }, {
        iconLayout: 'default#image',
        iconImageHref: '../icons/' + iconName,  // The path to the icon depends on how your project is structured
        iconImageSize: [15, 15],
        iconImageOffset: [-24, -24],
        iconContentLayout: MyIconContentLayout
    });

    myMap.geoObjects.add(placemark);
}

• additionally, i will add the logic to change the size of the image based on the population to math the laboratory work requirements

[worthant]

I have a new idea

• instead of focusing on maps api i will add 2 buttons {visualize, world map} side-by-side
• that will allow me finishing laboratory work requirements faster and focus on world map after

[worthant]

I think the final version would look something like this:

• this have both worldMap and simple visualize windows.
• for reference: worldMap works very very slow on laptop due to the hard usage of graphics)