I need to create a custom marker for Google Map that i am using for my website. I don't want to use an image or polygons for marker, but code the marker in html and add it on the map. Please suggest possible ways to implement it.
Go to this demo-purpose website: http://easysublease.org/mapcoverjs/
It shows how one developer can just write HTML template and CSS, then specify JavaScript Event handlers to create fully customized, Fully HTML specified markers on map.
If you need more, you can go to its Github see readme.md:
https://github.com/bovetliu/mapcover
-------detailed way explaining how it works--------------
First. to be prepared, you need one HTML block to specify how you markers would be like,
such as: (which is an Underscore template, you can choose whatever template, or if you don't need any dynamic thing in your marker, just supply pure HTML, but still needs turn it into compiled template function)
<div class="mc-static2mapcanvas customized-marker">
<div class="content"><%= displayedText %></div>
<div class="text-center remove-background">
<span aria-hidden="true" class="glyphicon glyphicon-triangle-bottom">
</span>
</div>
</div>
Then you need CSS/Less to style it, right? just like styling one common dom on page:
.customized-marker{
background-color: rgba(0, 255, 255, 0);
.content{
background-color: #FF5A5F;
color: #fff;
padding:0px 5px;
font-size: 14px;
}
.remove-background{
padding: 0px;
margin: 0px;
margin-top: -4px;
color:#FF5A5F;
background-color: rgba(255, 255, 255, 0);
}
}
.customized-marker.customized-marker-hover{
.content{
background-color: #252525;
}
.remove-background{
color:#252525;
}
}
Then you can import Mapcover.js and its dependencies to your page containing map.
Please refer the index.html shown at its Github.
Before creating your custom marker, you need one object specify where is the marker, and its event handlers, possibly, like this:
var custom_marker_option = {
anchor: null,
datacontent:{"displayedText":"This Marker1"},
latLng: new google.maps.LatLng(-34.397, 150.644),
map: mapcover.model.get("map"),
mouseover:function(container_node){
console.log("marker heard mouseover");
// console.log(event.latLng);
// console.log(container_node);
var dom = container_node.childNodes[0];
dom.classList.add("customized-marker-hover");
},
mouseout:function(container_node){
console.log("marker heard mouseout");
// console.log(event.latLng);
// console.log(container_node);
var dom = container_node.childNodes[0];
dom.classList.remove("customized-marker-hover");
},
click:function(container_node){
console.log("you clicked me");
}
};
Then you initiate one Class inheriting "CustomMarker" Class provided by mapcover.js like this:
mapcover.initCustomMarker( "CustomMarker1" , _.template( $('#customMarkerTemplate').html() ));
Please be aware of that, $('#customMarkerTemplate').html() is given at beginning of this answer.
and _.template is just one template function provided by Underscore.js. You can choose whatever template compiling function you like.
Now comes the final exciting marker creating
var temp_marker_controller = mapcover.addCustomMarker("CustomMarker1" ,custom_marker_option );
Now, you have created one customized marker specified by HTML template and CSS, and you have also added event handlers to it!
You will need to use a custom Overlay object.
Over here is good tutorial that show how it can be done.
Related
We are adding custombuttons to our fullcalendar like below.
Is there a way to change the background and foreground color of the button?
And is there a way to set padding or margins to the custom buttons?
var calendar = new Calendar(calendarEl, {
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});
Yes, you can set any properties you like using CSS.
On inspecting how fullCalendar renders the buttons in HTML, I noticed it gives each one a class according to the property name of the button.
For example, if - per your sample code - you call the button myCustomButton then fullCalendar will give the rendered <button a CSS class called fc-myCustomButton-button. This means you can specify any rules you like for that class, e.g.:
.fc-myCustomButton-button
{
background-color: red !important;
}
(You need the !important so that fullCalendar's other CSS rules don't override it.)
Demo: https://codepen.io/ADyson82/pen/WNJqXLM
My app in Ionic 4 but I can’t understand how to customize components.
And i want to display alignment position top right corner.
I have tried in global.css file as well as component.css file , but didn't any luck.
async getNotifications() {
const popover = await this.popoverController.create({
component: NotificationComponent,
// event: ev,
cssClass: 'notificationCSS',
translucent: true
});
return await popover.present();
}
In notificationCSS :
.notificationCSS{
top: 0px !important;
right: 0px !important;
}
Ref. Url
I had a similar problem in ionic for dynamically (maybe not exactly correct in angnular world) rendered html elements. My component css file didn't pick up the classes that I was targetting. However global.css did. I would try put your css in global again.
In my AngularJS app, I have a service (or more technically, a provider) which contains a bunch of logic to insert DOM elements on the <body>.
It is quite cumbersome and hard to follow; for example, there are a lot of .append calls of one element into another and into another.
I would like to extract all the DOM code from the service into its own template file. The problem is, while I can find examples for how to do this with directives, I cannot figure out how this would work with a service.
NOTE that I need this to remain a service (as opposed to a directive) because I need it to overlay the entire screen and be callable from a variety of different controllers.
I've recreated my situation in a Plunkr and below, though the service's DOM logic is obviously simplified and shrunk
var app = angular.module('App', []);
app.provider('MyProvider', [function(){
this.$get = ['$window', function($window){
return function(){
var bodyElement = angular.element($window.document.body);
var myNewElement = angular.element('<div class="my-new-element">');
var someText = angular.element('<p>Here is some text<p>');
var xButton = angular.element('<button>X</button>');
xButton.on('click', function(){
myNewElement.remove();
});
myNewElement.append(someText);
myNewElement.append(xButton);
bodyElement.append(myNewElement);
}
}];
}]);
app.controller('MainController', ['$scope', 'MyProvider', function($scope, MyProvider){
$scope.amount1 = 1234.56;
$scope.symbol2 = 'USD$';
$scope.amount2 = '1234.56';
$scope.activateService = function(){
MyProvider();
}
}]);
<!doctype html>
<html ng-app="App">
<head>
<script type="text/javascript" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<style>
.my-new-element {
width: 100%;
height: 50%;
background-color: green;
position: fixed;
top: 0px;
left: 0px;
}
button {
padding: 10px;
margin: 15px 0;
background-color: #bbb;
}
</style>
</head>
<body ng-app="">
<div ng-controller="MainController">
<span>Amount1: {{amount1 | currency:"USD$"}}</span><br/>
<span>Symbol2: <input ng-model="symbol2"/></span><br/>
<span>Amount2: <input ng-model="amount2"/></span><br/>
<button ng-click="activateService()">Activate The Service</button>
</div>
</body>
</html>
You could probably this into both a Directive and a Service. Say something like:
app.service('MyOverlayService', [function(...){}]);
app.directive('myOverlay', ['MyOverlayService', function(os){...}];
Where your service contained things like:
visible [boolean]
list of objects to display (menu items perhaps?)
etc
and your directive listened to those things:
Toggle display/visible based on {{os.visible}}
Listed all the data on in for example if this is a menu, you'd ng-repeat items in os.menus
You could then put your overlay directive on your highest template, and in each of your controllers inject MyOverlayService and do a:
os.setVisible(true); // or os.toggle()
I am using JQueryUI draggable and I would like to be able to add styling to the draggable element while it is being dragged. I have tried variations on this code:
$(".ui-widget-content").draggable({
drag: function(event, ui) {
$(this).css("width", "50px");
});
However, my attempts have failed and I believe it it because I don't know how to get the draggable element from the ui object. What am I missing?
No need for extra JavaScript. Just use this CSS selector:
.ui-draggable-dragging {
/*
This class is applied to the element while it is being dragged.
This is done automatically by jQueryUI.
*/
width: 50px;
}
Read the docs here: http://jqueryui.com/demos/draggable/#overview-main
I have a sortable list of items that returns results based on what the user types in the search box. The results always overflows and here i am using the following css for it:
#list { overflow-x: visible; overflow-y: hidden; }
This allows me to have only a vertical scrollbar. I then drag the individual li's that are in the list over to a droppable area. The sortable functionality is added to the list using the JQuery below:
$("#list").sortable({
connectWith: ".connectedSortable",
helper: 'clone',
appendTo: 'body',
zIndex: 999
});
The reason i use the appendTo: 'body' is to ensure that the item that is being dragged is on top of everything and will not be under the list's other items when being dragged. However, whenever I drag any item from the list, the DIVs that are in the item will have their CSS styling gone.
I understand that this is due to the fact that when the item is dragged, it is appended to 'body' and thus does not have any parent to inherit the original CSS styles.
My question is how do i style the dragged item back to its original styling to make sure it stays the same even if I am dragging/not dragging it? through the events?
EDIT:
Found the reason for the css messing up. It was a random br thrown in between two div's causing it to be interpreted differently when the item was being dragged and appended to the body.
You have two options to sort the problem. One is to create your own helper with the function. This way you can style is any way you want, wrap it in an element, add classes, etc.
The following demo shows the difference, the top one works, the bottom one is broken. http://jsfiddle.net/hPEAb/
$('ul').sortable({
appendTo: 'body',
helper: function(event,$item){
var $helper = $('<ul></ul>').addClass('styled');
return $helper.append($item.clone());
}
});
The other option is not to use append:'body', but to play with zIndex. Your zIndex:999 clearly has no effect, since the default value is 1000. :) The problem with zIndex is that it only matters for siblings, elements within the same parent. So if you have another sortable on your form with a greater zIndex than your current sortable, its items could easily be on top of your dragged one, regardless of the zIndex of your currently dragged item.
The solution is to push your whole sortable on top when dragging starts and restore it when it stops:
$('#mySortable').sortable({
start: function(){
// Push sortable to top
$(this).css('zIndex', 999);
},
stop: function(){
// Reset zIndex
$(this).css('zIndex', 0);
}
});
If the original value matters, you can even save the original zIndex with .data() and retrieve it afterwards.
Thank you DarthJDG. I am aware this thread is a little old but I hope to help others that had the same issue I did.
I had to edit your solution a little bit because the styling was off when appending the item to the helper. I ended up just recreating the list element. Just in case others run into the same issue I did.
I added this into the area where I created the sortable.
I took the text out of the sortable and created a new list item with that as text.
Javascript:
appendTo: 'body',
helper: function(event,$item){
console.log(event);
var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>');
return $helper;
}
I was then able to add custom styling to the draggable object, including custom text with out an issue. The styling I ended up using was that of JQuery Smoothness.
CSS:
.styled li{
margin-left: 0px;
}
.styled{
cursor:move;
text-align:left;
margin-left: 0px;
padding: 5px;
font-size: 1.2em;
width: 390px;
border: 1px solid lightGrey;
background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555;
list-style-type: none;
}