How can I make the marker Icons bigger?
tetranow opened this issue · 3 comments
I've been googling for hours. I want to make the icon of a marker bigger. Can't find anything. Help me, please
I think you are after some custom CSS - which I think there is an 'override css' file for.
If you are wanting to change all the icons, you might be able to use the markerIcon16x16 class to affect them all. Otherwise you are getting into some pretty specific CSS stuff .... or custom front end.
First comment was deleted because I miss read marker as maker and assumed player. haha
The marker CSS is located in css/dynmap_style.css
/* Marker styles */
.dynmap .mapMarker .markerName {
display: none;
z-index: 101;
}
.dynmap .mapMarker:hover .markerName,
.dynmap .mapMarker .markerName-show {
display: block;
position: absolute;
z-index: 16;
white-space: nowrap;
color: #fff;
background: rgba(0,0,0,0.6);
padding: 2px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.dynmap .mapMarker .markerName16x16 {
top: -6px;
left: 10px;
}
.dynmap .mapMarker .markerName8x8 {
top: -4px;
left: 6px;
}
.dynmap .mapMarker .markerName32x32 {
top: -8px;
left: 18px;
}
.dynmap .mapMarker .markerIcon16x16 {
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
}
.dynmap .mapMarker .markerIcon8x8 {
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
}
.dynmap .mapMarker .markerIcon32x32 {
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
}
.dynmap .mapMarker .markerName_offline_players {
font-style: italic;
}
.dynmap .coord-control {
color: #000;
border: 1px solid rgba(128,128,128,0.6);
background-color: #bbb;
border-style: solid;
padding: 2px;
min-width: 80px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.dynmap .coord-control-noy {
width: 60px;
}
.dynmap .coord-control .coord-control-label {
}
.dynmap .coord-control .coord-control-value {
font-weight: bold;
}
.dynmap .dynmap-link {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
padding: 2px;
background: rgba(0, 0, 0, 0.25);
}
.dynmap .dynmap-link a {
background-color: rgba(255, 255, 255, 0.75);
}
.dynmap .dynmap-link a {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.dynmap .dynmap-link a {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
width: 19px;
height: 19px;
}
.dynmap .dynmap-link a:hover {
background-color: #fff;
}
.leaflet-big-buttons .dynmap-link a {
width: 27px;
height: 27px;
}
.dynmap .dynmap-link-button {
background-image: url(images/link.png);
}
I am at work currently and do not wish to edit CSS on SSH on my cell, I will update CSS later today and confirm exactly the code to increase icon size of markers. CSS is very easy to use and you should see your changes take effect right away by just refreshing your webpage!
I also do see the override_example.css file. I assume this file is just loaded AFTER the main CSS effectively overriding any CSS classes in the main file with the changes placed in the override file, but I do not think it matters what file you edit the class in. :)
Update:
Looking in index.html's header really quick, I see there is indeed a line that just needs to be uncommitted and you need to make a file called override.css in the css folder, or modify the curret file to just be override.css
<!--<link rel="stylesheet" type="text/css" href="css/embedded.css" media="screen" />-->
<link rel="stylesheet" type="text/css" href="css/standalone.css?_=3.3-SNAPSHOT-535" media="screen" />
<link rel="stylesheet" type="text/css" href="css/dynmap_style.css?_=3.3-SNAPSHOT-535" media="screen" />
<!-- <link rel="stylesheet" type="text/css" href="css/override.css" media="screen" /> -->
change this to
<!--<link rel="stylesheet" type="text/css" href="css/embedded.css" media="screen" />-->
<link rel="stylesheet" type="text/css" href="css/standalone.css?_=3.3-SNAPSHOT-535" media="screen" />
<link rel="stylesheet" type="text/css" href="css/dynmap_style.css?_=3.3-SNAPSHOT-535" media="screen" />
<link rel="stylesheet" type="text/css" href="css/override.css" media="screen" />
then rename override_example.css to override.css, or make a new file called override.css and make your changes there to keep the main file clean. Changes in override.css will load after dynmap_style.css meaning they will be the style used after the page is loaded.
I finally had a chance to check it out, if you look at my screenshot, you can see that the class is
.dynmap .mapMarker .markerIcon16x16 {
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
}
I changed the width and height of that class and it did indeed scale the icon, but will also scale ALL the in this class, you will need to make a custom class and tie your icon to that class.
I did this only in firefox and did not actually edit any of the files myself, but this should be enough to point you in the right direction. You will most likely need to do more work to make it display the way you want it to, but this should help.
Update
If you are feeling adventurous, head to web/js/markers.js and find bit of code
$(div)
.addClass('Marker')
.addClass('mapMarker')
.append($('<img/>').addClass('markerIcon'+marker.dim).attr({ src: url }));
change it to
$(div)
.addClass('Marker')
.addClass('mapMarker')
.append($('<img/>').addClass('markerIcon'+marker.dim).addClass('markerName_' + marker.label).attr({ src: url }));
This will give you a new class on all your Marker Icons that is .markerName_'label'
you can then add to your css a new class to modify only the icon with the label you choose when you add the marker.
My marker was labeled home, so my new class would be .markerName_home and my css would look like
.dynmap .mapMarker .markerIcon16x16 {
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
}
.dynmap .mapMarker .markerName_home{
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
}
The end results
As you can see, I have a home icon that is larger and a spawn icon that is still normal size. I oversized the home icon for the sake of seeing the changes, you can pick any size you want.