javascript - mulitple divs with different css -
i'm working mapquest , leaflet. can have multiple maps on screen @ same time. have edited leaflet.css
file, , change size of icons within map, zoom map @ , change icon sizes in leaflet.css
file such:
if (map.getzoom()=== 13) { $('.leaflet-label').css('font-size', '24px'); }
the above label, pretty same icon/markers. because have 4 maps, use same leaflet.css
file. when zoom in on 1 particular map, labels/markers/icons other maps change too, though zoom being utilized on 1 map.
my html looks this:
<link rel="stylesheet" href="leaflet.css" /> <link rel="stylesheet" href="leaflet.label.css" /> <div class="maps" style="width:400px; height:400px; left:1400px;" id="map"></div> <div class="maps" style="width:400px; height:400px; top:-400px;" id="map2"></div> <div class="maps" style="width:400px; height:400px; top:-800px; left:960px;" id="map3"></div> <div class="maps" style="width:400px; height:400px; top:-1200px; left:550px;" id="map4"></div>
is there way set each div acts independently of others?
in css, have .maps{}
class (i'm assuming) holds of default shared style setting maps.
you can specify settings each of different ids if i.e.,
#map2{ width:400px; height:400px; top:-400px; } #map3{ width:400px; height:400px; top:-800px; left:960px; } #map4{ width:400px; height:400px; top:-1200px; left:550px; }
then, can choose map zoom using id selector instead of class selector.
Comments
Post a Comment