For the first time in the history of OpenLayers, we can render features with multiple symbolizers now, which is also shown in this new example.
48 lines
1.3 KiB
HTML
48 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
<link rel="stylesheet" href="style.css" type="text/css">
|
|
<style type="text/css">
|
|
html, body, #map {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#text {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
z-index: 20000;
|
|
background-color: white;
|
|
padding: 0 0.5em 0.5em 0.5em;
|
|
border-radius: 4px;
|
|
}
|
|
@media only screen and (max-width: 600px) {
|
|
#text {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
<title>Vector Layer Example</title>
|
|
</head>
|
|
<body>
|
|
<div id="map">
|
|
<div id="text">
|
|
<h1 id="title">Style rules example</h1>
|
|
<div id="shortdesc">Draws features with rule based styles.</div>
|
|
<div id="docs">
|
|
<p>See the
|
|
<a href="style-rules.js" target="_blank">style-rules.js source</a>
|
|
to see how this is done.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="tags">vector, feature, canvas</div>
|
|
<script src="loader.js?id=style-rules" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|