Can you please let me know if there is a way to bind a CSS class .marker to an ArcGIS SimpleMarkerSymbol in a graphic layer?
I have a SimpleMarkerSymbol called schoolMarker which I am styling it using ESRI's options but I need to add more CSS styles like .marker
var schoolMarker = new SimpleMarkerSymbol();
schoolMarker.setStyle(SimpleMarkerSymbol.STYLE_CIRCLE);
schoolMarker.setSize(30);
schoolMarker.setOutline(null);
schoolMarker.setColor(new Color([255,116,0,0.25]));
Here is the CSS class:
.marker{
stroke-linecap: round;
stroke-linejoin: round;
stroke-opacity: 1.0;
fill-opacity: 1.0;
background-color: rgb(0, 89, 190);
stroke: rgb(0, 89, 190);
fill: rgb(0, 89, 190);
fill-opacity: 1;
stroke-width: 70pt;
stroke-opacity: 1;
opacity: 0.12;
}
This is a good guide to get you started
https://developers.arcgis.com/javascript/3/jshelp/inside_styling_svg.html
Of note:
set the styling property of the feature layer to false. This means you are entirely responsible for styling the features.
Set (or find out what it is) the dataAttributes. In the rendered html they will look like this
<path fill="none" fill-opacity="0" stroke="none" stroke-opacity="0" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" path="M 548,163 549,163 549,164 548,164 Z" d="M 548 163 549 163 549 164 548 164Z" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)" data-unique-value="LIBRARY"></path>
determine how detailed you need to be in breaking up classes and features. This is standard css organization. Do you need to style the whole feature class? use the feature className attribute. Do you need to target all of a certain geometry type? use data-geometry-type.
Related
In SVG you can have things which are only clickable at the stroke, e.g. because there is no fill or because of pointer-events: stroke.
Example:
document.querySelector("#path1").addEventListener("click", function(e) {
console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
console.log("Click2!")
})
#path1:hover {
stroke: red;
}
#path2:hover {
stroke: green;
}
<svg height="300" width="300">
<path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="none" id="path1" />
<path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="none" id="path2" />
</svg>
In my project I want to write Selenium tests for I have a dynamically generated SVG <path>s which I want to click at using Selenium, the problem is that the center of the element1 is not necessarily clickable (since only the stroke of the path is).
Some ideas I had:
Clicking at a fixed offset: A possibility but since the generated path is highly dynamic it would mean a lot of tinkering with the offset value to get it right and possibly having to change the test a lot of the future.
Triggering click event through code: Would work but make the test less useful since this way it would not test whether the stroke of the path is indeed clickable. Certain bugs could evade being detected by the test this way.
Setting a non-none fill through code or replacing/adding filled a rect around the <path>: Setting fill might not guarantee either that the center is clickable. A <rect> would work but then the clickable areas of multiple paths would overlap which could mean that the wrong path gets the click.
None of these approaches are ideal. Are there any other possibilities?
(I am using Selenium for Python but I am OK with solutions with Selenium for other programming languages since normally it's easy to port.)
1) This is the default position Selenium clicks at if using the function where no offset is specified, or rather it's the center of the visible area of the element since the newest version of the WebDriver protocol but in my use case everything can be assumed to be fully visible.
P.S.
Demo showing why setting fill to something other than none wouldn't help (or pointer-events to all):
document.querySelector("#path1").addEventListener("click", function(e) {
console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
console.log("Click2!")
})
#path1:hover {
stroke: red;
}
#path2:hover {
stroke: green;
}
<svg height="300" width="300">
<path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="turquoise" id="path1" />
<path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="yellow" id="path2" />
</svg>
I'm using PyQt5 and QtDesigner to build a simple app.
I'm also using the QDarkStyle package to modify the ui appearance.
I'm trying to change a QTextBrowser widget's frame properties, like lineWidth, frameShape and frameShadow.
I cannot find out how to get to these properties and modify them.
I could overwrite the stylesheet of the object from QtDesigner as such:
QTextBrowser#evidence_text_browser{
border-color: rgb(0, 79, 148);
background-color: rgb(34, 54, 75);
}
A map that I am building with OpenLayers 3 has some buttons, which may or may not be available depending on some other things. So I want to keep the unavailable buttons hidden, and others will use their space. The available options can change, so sometimes a button may become (in)visible.
There are some tutorials for creating custom controls with OpenLayers 3. The problem is that all samples I have seen use absolute positioning for the controls. One needs to know how many controls will be visible, and hard-code the coordinates in CSS. Or change the coordinates using Javascript. I.e., from the above link:
.rotate-north {
top: 65px;
left: .5em;
}
I have tried just setting the element with position:relative, but then they appear below the map, as the controls are added to the page after the map. So, one could use relative positioning with negative coordinates, but then if the map changes size you have to rewrite the coordinates in Javascript.
.ol-control.left-top {
position: relative;
top: -400px; /*map height*/
}
Is there a way to elegantly implement relative-positioned custom controls with OpenLayers 3, ideally with only CSS?
I guess I am trying to get a similar functionality as in the Google Maps API:
map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlDiv);
Though it is not a good solution for my use case, since it is not supported by Android 4.3 and earlier, one could use CSS calc as suggested by #Jonatas:
html:
<div class="parent">
<div class="map"></div>
<div class="control"><button>CONTROL</button></div>
</div>
css:
.map {
width: 100%;
height: calc(100vh - 2em);
background-color: green;
}
.control {
position: relative;
left: .5em;
top: calc(-100vh + 2em + .5em);
}
This would probably have to use viewport units (also not supported by Android 4.3 and earlier), as calc can only calculate values based on the parent element.
jsfiddle: https://jsfiddle.net/adlerhn/zjt53nmf/
Please refer to the image below:
It's cutting off some of the table data because of the width. My table width is more than 1000 px. I know The default document size for ABCpdf is 612 by 792.
Using the code below to set document width and height
double w = doc.MediaBox.Width;
double h = doc.MediaBox.Height;
double l = doc.MediaBox.Left;
double b = doc.MediaBox.Bottom;
doc.Transform.Rotate(90, l, b);
doc.Transform.Translate(w, 0);
doc.Rect.Width = h;
doc.Rect.Height = w;
I want to display all tabular data. Do I need to modify my table size? Or do I need to modify the document page size of the pdf?
How could i resolve this issue?
Thanks,
Siva
After reviewing the HTML, I think that I can give you a few tips on how to resolve your issue:
1- Use the Gecko Engine for PDF Rendering:
doc.HtmlOptions.Engine = WebSupergoo.ABCpdf9.EngineType.Gecko;
The Gecko Engine provides better Css compliance when rendering in ABCPdf.
2- In your Css you have overflow-x set to scroll for the inner-container. This causing the behavior that you are seeing. I would add the following Css to the bottom of the Css:
#media print
{
.outer-container {
background-color: #ccc;
position: absolute;
top:0;
left: 0;
right: 300px;
bottom:40px;
overflow: visible;
width: 100%;
}
.inner-container {
width: 100%;
height: 100%;
position: relative;
overflow-x: visible;
}
table
{
width: 100%;
}
}
Notice the #media print which makes the css only effective during print and would not affect that way it shows on the screen.
3- Finally, you can try playing with the browser width:
doc.HtmlOptions.BrowserWidth = 1200;
The only problem with the BrowserWidth property is that it will affect the zoom on the document. All the text fonts will appear smaller.
Good luck...
You haven't specified if you are converting an HTML page to PDF- but I assume you are. If that is the case, have you looked at the browser width property? Look into the XHTMLOptions object properties- it will help you fine tune the rendering:
http://www.websupergoo.com/helppdfnet/source/5-abcpdf/xhtmloptions/
I am using using Bingmap api, want to use static map i am using following api reference
http://msdn.microsoft.com/en-us/library/ff701724.aspx
My question is over static map can we display custom pushpin image ?
any quick idea
No - you can choose from one of the 37 built-in pushpin styles, but you can't provide your own custom icon. See http://msdn.microsoft.com/en-us/library/ff701719.aspx for reference.
No, but if you make the same request to Microsoft API with the "&mmd=1" parameter you get a JSON object which includes the pixel offsets of all the markers. With this info you could fairly easily render custom markers with CSS, or composite an image yourself with ImageMagick or similar.
Custom pushpins are not supported natively in the static map api, but as #Ed said you can get metadata about the pushpin location if you need to do this.
This will require a separate call to the same endpoint as the map image with the &mmd=1 or &mapMetadata=1 query appended in the url. This returns an object with a metadata about the map including the pushpin position (minus the map image itself)
http://msdn.microsoft.com/en-us/library/hh667439.aspx
Below is a snippet showing an example of how to do this:
// pushpinData is the returned object from the call
// the anchor property is an object like this {x:200,y:100}
var pushpinPosition = pushpinData.resourceSets[0].resources[0].pushpins[0].anchor;
// the offsets are to do minor adjustments of the image placement
var pushpinXPos = pushpinPosition.x - xoffset;
var pushPinYPos = pushpinPosition.y - $("#myMap").height()- yoffset;
var pushpin = "<img id='pushpinImg' src='marker.png'></img>";
$("#myMap").append(pushpin);
$('#pushpinImg').css('margin-left', pushpinXPos + 'px')
$('#pushpinImg').css('margin-top', pushPinYPos + 'px')
If you only need to center a single pin, which is probably the most common use case for this sort of thing, you can also generate a static image without a pin, and then use CSS to center your custom pin over the image.
Example HTML:
<div class="wrapper">
<img class="map" src="path/to/bing-maps/static/image" />
<img class="pin" src="path/to/custom/pin.jpg" />
</div>
Example CSS:
.wrapper {
max-width: 400px;
position: relative;
}
.map {
display: block;
width: 100%;
}
.pin {
display: block;
height: 34px;
left: 50%;
margin-left: -10px;
margin-top: -34px;
position: absolute;
top: 50%;
width: 20px;
}
Here's a working fiddle: http://jsfiddle.net/jaredjensen/fem4a556/